JS 控制复选框 checkbox 的全选、全不选与反选

复选框的全选、全不选与反选非常常用，实现的方法也比较多。今天写这个是用按钮来控制的，当然也可以使用复选框本身来控制。

好了，废话不多说，直接上代码，看代码就是最直接的学习方式。

 1 <html>
 2 <head>
 3 <title>checkbox&nbsp;test</title>
 4 <script type="text/javascript">
 5 function $(id) { return document.getElementById(id); }
 6 /**
 7  * 选择复选框
 8  * @param type 1 全选；0 全不选
 9  * @author yuhuashi
10  * @Date 2012-12-29
11  */
12 function checkAll(type) {
13     type = Number(type);
14     var inputs = document.getElementsByTagName("input");
15     for(var i = 0; i < inputs.length; i++) {
16         if(inputs[i].type == "checkbox") {
17             inputs[i].checked = type;
18         }
19     }
20     setCheckType(type);
21 }
22 
23 /**
24  * 设置按钮文字和选择标识
25  * @param type 1 全选；0 全不选
26  * @author yuhuashi
27  * @Date 2012-12-29
28  */
29 function setCheckType(type) {
30     var btnSelect = $("btnSelect");
31     if(type) {
32         btnSelect.value = "全不选";
33     } else {
34         btnSelect.value = "全选";
35     }
36     fm.hidnSelectFlag.value = Number(!type);
37 }
38 
39 /**
40  * 反选
41  * @author yuhuashi
42  * @Date 2012-12-29
43  */
44 function checkOpposite() {
45     var inputs = document.getElementsByTagName("input");
46     var checkboxLength = 0; // 所有复选框的数量
47     var selectedCount = 0; // 所有被选中的复选框数量
48     var checkType = false;
49     for(var i = 0; i < inputs.length; i++) {
50         if(inputs[i].type == "checkbox") {
51             inputs[i].checked = !inputs[i].checked;
52             checkType = inputs[i].checked;
53             checkboxLength++;
54             if(checkType) { selectedCount++; }
55         }
56     }
57     if((checkboxLength == selectedCount) || (!selectedCount)) {
58         setCheckType(checkType);
59     }
60 }
61 </script>
62 </head>
63 
64 <body>
65 <form name="fm" action="#" method="post">
66 <input type="checkbox" name="" value=""/><br/>
67 <input type="checkbox" name="" value=""/><br/>
68 <input type="checkbox" name="" value=""/><br/>
69 <input type="checkbox" name="" value=""/><br/>
70 <input type="checkbox" name="" value=""/><br/>
71 <input type="button" id="btnSelect" value="全选" onclick="checkAll(fm.hidnSelectFlag.value)"/>
72 <input type="hidden" name="hidnSelectFlag" value="1"/>
73 <input type="button" value="反选" onclick="checkOpposite()"/>
74 </form>
75 </body>
76 </html>

很简单吧，几句话就搞定了。如果有什么疑问欢迎留言交流。