1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title>全选示例</title>
6 </head>
7 <body>
8 <input type="checkbox" id="ckBox" onclick="selAllNo()" />全选/全不选
9 <br>
10 <input type="checkbox" name="hobby" onclick="check()" />篮球
11 <br>
12 <input type="checkbox" name="hobby" onclick="check()" />足球
13 <br>
14 <input type="checkbox" name="hobby" onclick="check()" />羽毛球
15 <br>
16 <input type="checkbox" name="hobby" onclick="check()" />乒乓球
17 <br>
18 <input type="button" value="全选" onclick="selAll()" />
19 <input type="button" value="全不选" onclick="selNo()" />
20 <input type="button" value="反选" onclick="deSel()" />
21 <script type="text/javascript">
22 // 获取全选/全不选复选框
23 var ckBox = document.getElementById("ckBox");
24 // 获取到要操作的复选框
25 var hobbies = document.getElementsByName("hobby");
26 // 如果有一个没有选，那么去掉全选/全不选复选框
27 function check() {
28 for (var i = 0; i < hobbies.length; i++) {
29 // 只要有一个未选中，就设置复选框为未选中，并跳出循环
30 if (!hobbies[i].checked) {
31 ckBox.checked = false;
32 break;
33 } else {
34 // 如果全部都为选中，设置复选框为选中
35 ckBox.checked = true;
36 }
37 }
38 }
39 // 全选
40 function selAll() {
41 for (var i = 0; i < hobbies.length; i++) {
42 hobbies[i].checked = true;
43 }
44 ckBox.checked = true;
45 }
46 // 全不选
47 function selNo() {
48 for (var i = 0; i < hobbies.length; i++) {
49 hobbies[i].checked = false;
50 }
51 ckBox.checked = false;
52 }
53 // 全选/全不选
54 function selAllNo() {
55 if (ckBox.checked) {
56 for (var i = 0; i < hobbies.length; i++) {
57 hobbies[i].checked = true;
58 }
59 } else {
60 for (var i = 0; i < hobbies.length; i++) {
61 hobbies[i].checked = false;
62 }
63 }
64 }
65 // 反选
66 function deSel() {
67 for (var i = 0; i < hobbies.length; i++) {
68 // 选中的设为未选中，未选中的设为选中
69 hobbies[i].checked = (hobbies[i].checked) ? false : true;
70 }
71 // 检查反选是否有未选中的
72 check();
73 }
74 </script>
75 </body>
76 </html>
