1 <!DOCTYPE html>
2 <html lang="en">
3
4 <head>
5 <meta charset="UTF-8">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <meta http-equiv="X-UA-Compatible" content="ie=edge">
8 <title>Document</title>
9 </head>
10 <style>
11 table {
12 width: 70%;
13 }
14 </style>
15
16 <body>
17 <table border="1">
18 <tr>
19 <th width='80px'><input type="checkbox" onclick="qunxuan()" name="" id="all">全选</th>
20 <th>姓名</th>
21 <th>性别</th>
22 <th>年龄</th>
23 </tr>
24 <tr>
25 <td><input type="checkbox" name="e" id=""></td>
26 <td>张三</td>
27 <td>男</td>
28 <td>24</td>
29 </tr>
30 <tr>
31 <td><input type="checkbox" name="e" id=""></td>
32 <td>李四</td>
33 <td>女</td>
34 <td>34</td>
35 </tr>
36 <tr>
37 <td><input type="checkbox" name="e" id=""></td>
38 <td>王五</td>
39 <td>男</td>
40 <td>45</td>
41 </tr>
42 </table>
43 <input type="button" value="按钮">
44 </body>
45
46 </html>
47 <script>
48 // 获取需要用的元素对象
49 var allchek = document.querySelectorAll('input[name="e"]');//获取所有在tbody中的复选框
50 var chek = document.querySelector('#all');//获取全选框
51 var fanxuan = document.querySelector('input[type="button"]')//获取反选按钮
52 // 全选事件
53 function qunxuan() {
54 // 遍历所tbody中的复选框
55 for (var i = 0; i < allchek.length; i++) {
56 // 获取全选框的状态
57 var a = chek.checked;
58 // 根据全选框的状态设置tbody中的复选框的状态
59 if (a) {
60 allchek[i].checked = true;
61 } else {
62 allchek[i].checked = false;
63 }
64 }
65 }
66
67 // 遍历tbody中的复选框并注册单击事件
68 for (var i = 0; i < allchek.length; i++) {
69 allchek[i].onclick = function () {
70 // 设置一个参数用来判断是不是tbody中的复选框都选中或不选中
71 var flag = true;
72 // 遍历tbody中的复选框并判断其状态
73 for (var j = 0; j < allchek.length; j++) {
74 var a = allchek[j].checked;
75 // 如果不选中则flag设为false
76 if (!a) {
77 flag = false;
78 break;//只判断第一个，提高效率
79 }
80 }
81 // 通过判断flag的设置全选框的状态
82 if (flag) {
83 chek.checked = true;
84 } else {
85 chek.checked = false;
86 }
87 };
88 }
89
90 // 反选事件
91 fanxuan.onclick = function () {
92 // 遍历所有的tbody中的复选框
93 for (var j = 0; j < allchek.length; j++) {
94 var a = allchek[j].checked;
95 if (a) {
96 allchek[j].checked = false;
97 } else {
98 allchek[j].checked = true;
99 }
100 };
101 // 设置一个参数用来判断是不是tbody中的复选框都选中或不选中
102 var flag = true;
103 // 遍历tbody中的复选框并判断其状态
104 for (var j = 0; j < allchek.length; j++) {
105 var a = allchek[j].checked;
106 // 如果不选中则flag设为false
107 if (!a) {
108 flag = false;
109 break;//只判断第一个，提高效率
110 }
111 }
112 // 通过判断flag的设置全选框的状态
113 if (flag) {
114 chek.checked = true;
115 } else {
116 chek.checked = false;
117 }
118 };
119 </script>
