当前位置 : 主页 > 网页制作 > html >

全选,全不选,反选

来源:互联网 收集:自由互联 发布时间:2021-06-12
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
  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>
网友评论