js复选框实现全选、全不选、反选

复选框为checkbox对象

通过input就可以将一个简单的复选框呈现在页面上

<input type="checkbox" />

要实现的大概就是这样一个页面

 

思路

全选

因为要得到复选框数组，而id又不能重复。所以通过name来得到复选框数组。得到数组后遍历，将所有checked值设置为true即可实现全选，全不选原理相同

反选

同样的方法得到复选框数组，遍历的时候判断如果checked值为true则改为false，checked值为false则改为true

最上面的全选/全不选功能

通过id获得最上面的复选框，判断其checked值若为true则将所有的复选框设置为true,为false则设置为false

注意

为什么不是true的时候设置为false呢？因为当点击的时候复选框已发生变化，这个时候，下面的复选框应该是与上面一致的

源代码如下

 1 <!DOCTYPE html>
 2 <html>
 3 
 4 <head>
 5     <meta charset="utf-8" />
 6     <title>复选框</title>
 7 
 8     <style type="text/css">
 9         
10     </style>
11 </head>
12 
13 <body>
14     <input type="checkbox" id="boxid" onclick="setAllNo()" />全选/全不选
15     <br />
16     <input type="checkbox" name="love" />篮球
17     <br />
18     <input type="checkbox" name="love" />排球
19     <br />
20     <input type="checkbox" name="love" />羽毛球
21     <br />
22     <input type="checkbox" name="love" />乒乓球
23     <br />
24     <input type="button" value="全选" onclick="setAll()" />
25     <input type="button" value="全不选" onclick="setNo()" />
26     <input type="button" value="反选" onclick="setOthers()" />
27 
28     <script type="text/javascript">
29         //全选函数
30         function setAll() {
31             var loves = document.getElementsByName("love");
32             for (var i = 0; i < loves.length; i++) {
33                 loves[i].checked = true;
34             }
35         }
36 
37         //全不选函数
38         function setNo() {
39             var loves = document.getElementsByName("love");
40             for (var i = 0; i < loves.length; i++) {
41                 loves[i].checked = false;
42             }
43         }
44 
45         //反选
46         function setOthers() {
47             var loves = document.getElementsByName("love");
48             for (var i = 0; i < loves.length; i++) {
49                 if (loves[i].checked == false)
50                     loves[i].checked = true;
51                 else
52                     loves[i].checked = false;
53             }
54         }
55         
56         //全选/全不选操作
57         function setAllNo(){
58             var box = document.getElementById("boxid");
59             var loves = document.getElementsByName("love");
60             if(box.checked == false){
61                 for (var i = 0; i < loves.length; i++) {
62                     loves[i].checked = false;
63                 }
64             }else{
65                 for (var i = 0; i < loves.length; i++) {
66                     loves[i].checked = true;
67                     }
68             }
69         }
70     </script>
71 
72 </body>
73 
74 </html>