用Jquery实现checkbox的反选、全选、全不选

当我们在用js来实现web端操作的时候，多选框的全选、全不选和反选是最常用的功能，尤其是当数据量大的时候就需要这样的批量操作来给用户带来方便、快捷的服务了。

       下面我们就来用jQuery实现checkbox多选框的全选、全不选、反选的功能：

        假设有4个checkbox多选框，他们包含在一个id=“chk”的div中，而全选、全不选、反选的button按钮所在标签的id分别为btnAllChk、btnAllNotChk、btnInvert。

具体代码如下：

下面的设置用attr，只能执行一次，如果用prop可以执行多次

[html] view plain copy

1. $(function () {  
2.   
3.     //全不选  
4.   
5.      $("#btnAllNotChk").click(function () {  
6.   
7.         $("#chk input:checkbox").removeAttr("checked");  
8.   
9.      });  
10.   
11.     //全选  
12.   
13.      $("#btnAllChk").click(function () {  
14.   
15.         $("#chk input:checkbox").attr("checked", "checked");  
16.   
17.      });  
18.   
19.      //反选  
20.   
21.       $("#btnInvert").click(function () {  
22.   
23.         //1.方法一实现反选                     
24.   
25.           $("#chk input:checkbox").each(function () {  
26.   
27.             this.checked = !this.checked;  
28.   
29.          })  
30.   
31.          //2.方法二实现反选                  
32.   
33.           //  $("#chk input:checkbox").each(function (){                  
34.   
35.         //      if ($(this).attr("checked")) {                  
36.   
37.         //         $(this).attr("checked", false);                  
38.   
39.         //      }                  
40.   
41.         //      else {                  
42.   
43.         //         $(this).attr("checked", "checked");                  
44.   
45.         //      }                  
46.   
47.         //   })                  
48.   
49.         //3.方法三实现反选   
50.   
51.          //  var $cks = $("#chk input:checkbox");  
52.   
53.         //  for (var i = 0; i < $cks.length; i++) {  
54.   
55.         //     $cks.get(i).checked = !$cks.get(i).checked;  
56.   
57.         //  }  
58.   
59.     });  
60.   
61. })  

 

这样我们就实现了checkbox的全选、反选、全不选操作

注意：1.jquery本身就是由JavaScript代码堆积而成的；

            2.使用Jquery语句前先导入Jquery控件