全选和反选的案例

　　HTML结构:

 1 <div class="wrap">
 2         <table>
 3             <thead>
 4                 <tr>
 5                     <th>
 6                         <input type="checkbox" id="j_cbAll" />
 7                     </th>
 8                     <th>商品</th>
 9                     <th>价钱</th>
10                 </tr>
11             </thead>
12             <tbody id="j_tb">
13                 <tr>
14                     <td>
15                         <input type="checkbox" />
16                     </td>
17                     <td>iPhone8</td>
18                     <td>8000</td>
19                 </tr>
20                 <tr>
21                     <td>
22                         <input type="checkbox" />
23                     </td>
24                     <td>iPad Pro</td>
25                     <td>5000</td>
26                 </tr>
27                 <tr>
28                     <td>
29                         <input type="checkbox" />
30                     </td>
31                     <td>iPad Air</td>
32                     <td>2000</td>
33                 </tr>
34                 <tr>
35                     <td>
36                         <input type="checkbox" />
37                     </td>
38                     <td>Apple Watch</td>
39                     <td>2000</td>
40                 </tr>
41 
42             </tbody>
43         </table>
44         <input type="button" value="  反 选  " id="btn">
45     </div>

　　CSS样式:

 1  * {
 2             padding: 0;
 3             margin: 0;
 4         }
 5 
 6         .wrap {
 7             width: 300px;
 8             margin: 100px auto 0;
 9         }
10 
11         table {
12             border-collapse: collapse;
13             border-spacing: 0;
14             border: 1px solid #c0c0c0;
15             width: 300px;
16         }
17 
18         th,
19         td {
20             border: 1px solid #d0d0d0;
21             color: #404060;
22             padding: 10px;
23         }
24 
25         th {
26             background-color: #09c;
27             font: bold 16px "微软雅黑";
28             color: #fff;
29         }
30 
31         td {
32             font: 14px "微软雅黑";
33         }
34 
35         tbody tr {
36             background-color: #f0f0f0;
37         }
38 
39         tbody tr:hover {
40             cursor: pointer;
41             background-color: #fafafa;
42         }

　　根据结构,先获取事件源

1 var j_cbAll = document.getElementById('j_cbAll');    //全选按钮
2 var j_tb = document.getElementById('j_tb');    //tbody
3 var inputs = j_tb.getElementsByTagName('input');    //tbody中的input集合

　　第一步,先实现全选功能,为全选按钮添加单击事件

1 j_cbAll.onclick = function() {
2   for (var i = 0; i < inputs.length; i++) {
3     if (inputs[i].type === 'checkbox') {    //获取到所有复选框
4       inputs[i].checked = j_cbAll.checked;    //把全选框的值赋给所有复选框
5     }  
6   }  
7 }

　　对全选功能进行完善,当有复选框没有被选中时,全选按钮也不应该被选中

　　所以定义一个标识,初始值记作true,当有复选框没有被选中时,把标识的值改为false,最后把标识的值赋给全选按钮

 1 //先遍历拿到所有复选框
 2 for (var i = 0; i < inputs.length; i++) {
 3   if (inputs[i].type !== 'checkbox') {    //为了便于阅读,跳过所有不是复选框的,则就获取到了所有复选框
 4     continue;
 5   }
 6   //给复选框注册单击事件
 7   inputs[i].onclick = function () {
 8     var isChecked = true;    //初始化标识符
 9     //遍历复选框,查看所有复选框的选定状态
10     for (var i = 0; i < inputs.length; i++) {
11       if (inputs[i].type !== 'checkbox') {
12         continue;
13       }
14       if (!inputs[i].checked) {    //当存在没有被选中的复选框时,改变标识符的状态
15         isChecked = false;
16       }
17       j_cbAll.checked = isChecked;
18     }
19   }
20 }

　　至此,全选按钮的功能已经可以正常实现

　　接下来完成反选按钮的部分,首先获取事件源,然后给反选按钮添加单击事件

 1 var btn = document.getElementById('btn');
 2 btn.onclick = function() {
 3   //遍历复选框
 4   for (var i = 0; i < inputs.length; i++) {
 5     if (inputs[i].type !== 'checkbox') {
 6       continue;
 7     }
 8     inputs[i].checked = !inputs[i].checked;    //将复选框的值取反赋给本身,即可完成反选
 9   }
10   //还需要处理全选按钮的状态
11   var isChecked = true;
12   for (var i = 0; i < inputs.length; i++) {
13     if (inputs[i].type !== 'checkbox') {
14       continue;
15     }
16     if (!inputs[i].checked) {
17       isChecked = false;
18     }
19     j_cbAll.checked = isChecked;
20   }
21 }

　　到现在,所有的功能就全部可以正常实现了,但是代码中有两处判断全选按钮状态的代码完全相同,可以把它封装成一个方法

　　把代码整理以后就是最终的样子了

 1 var btn = document.getElementById('btn');
 2 var j_cbAll = document.getElementById('j_cbAll');
 3 var j_tb = document.getElementById('j_tb');
 4 var inputs = j_tb.getElementsByTagName('input');
 5         j_cbAll.onclick = function () {
 6             for (var i = 0; i < inputs.length; i++) {
 7                 if (inputs[i].type === 'checkbox') {
 8                     inputs[i].checked = j_cbAll.checked;
 9                 }
10             }
11         }
12         for (var i = 0; i < inputs.length; i++) {
13             if (inputs[i].type !== 'checkbox') {
14                 continue;
15             }
16             inputs[i].onclick = function () {
17                 checkcb();
18             }
19             function checkcb() {    //封装成方法checkcb()
20                 var isChecked = true;
21                 for (var i = 0; i < inputs.length; i++) {
22                     if (inputs[i].type !== 'checkbox') {
23                         continue;
24                     }
25                     if (!inputs[i].checked) {
26                         isChecked = false;
27                     }
28                     j_cbAll.checked = isChecked;
29                 }
30             }
31         }
32         btn.onclick = function () {
33             for (var i = 0; i < inputs.length; i++) {
34                 if (inputs[i].type !== 'checkbox') {
35                     continue;
36                 }
37                 inputs[i].checked = !inputs[i].checked;
38             }
39             checkcb();
40         }

明人不说暗话,最终这个直接复制了我写好的-.-