全选，全不选，反选

2019-08-19 09:01:12 阅读：263 来源： 互联网

标签：checked 反选 tbody 复选框 flag 全选全不选 var allchek

  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>

标签：checked,反选,tbody,复选框,flag,全选,全不选,var,allchek
来源： https://www.cnblogs.com/yanghaoyu0624/p/11375197.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

全选，全不选，反选