jquery實現購物車全選反選功能
阿新 • • 發佈:2018-11-09
利用jquery實現購物車中全選(反選)換圖功能,具體程式碼如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta content="width=device-width, initial-scale=1.0" name="viewport" /> <title>全選</title> <script language="JavaScript" type="text/javascript"> document.documentElement.style.fontSize = document.documentElement.clientWidth /6.4 + 'px'; </script> <style> label{ display: block; border: solid 1px red; width:100%; height:.75rem; font-size: .24rem; line-height: .75rem; text-align: center; background: url("check.jpg") #fff no-repeat 2.5rem center; background-size: .37rem .37rem; margin-top: .5rem; } label input{ opacity: 0; } .checked{ background: url("checked.jpg") #fff no-repeat 2.5rem center; background-size: .37rem .37rem; } </style> </head> <body> <label ><input class="input1" type="checkbox"/>全選</label> <label><input type="checkbox" class="input" />1</label> <label><input type="checkbox" class="input" />2</label> <label><input type="checkbox" class="input" />3</label> <script language="JavaScript" type="text/javascript" src="jquery-1.11.3.js"></script> <script language="JavaScript" type="text/javascript"> $(function() { var allInput = $(".input1"); allInput.click(function () { if (this.checked == true) { $(".input").prop('checked', true); $("label").addClass("checked"); } else { $(".input").prop('checked', false); $("label").removeClass("checked"); } }); $(".input").click(function () { $(this).parent().toggleClass("checked"); var s = $(".input").length; var a = $(".input:checked").length; if (s == a) { allInput.prop('checked', true); allInput.parent().addClass("checked"); } else { allInput.prop('checked', false); allInput.parent().removeClass("checked"); } }); }); </script> </body> </html>