js全选与取消全选

实现全选与取消全选的效果

要求1(将军影响士兵)：点击全选按钮，下面的复选框全部选中，取消全选按钮，下面的复选框全部取消

思路：复选框是否被选中，取决于check属性,将全选按钮的check属性值赋值给下面所有复选框的check值

要求2（士兵影响将军）: 当下面的某个复选框没有被选中时，全选按钮自动变为没被选中状态

当下面的所有复选框被选中时，全选按钮自动被选中

首先，写出如下的表格：

布局部分：

 1 <body>
 2     <div class="con">
 3         <table>
 4             <thead>
 5                 <tr>
 6                     <th><input type="checkbox" id="j_cball"></th>
 7                     <th>商品</th>
 8                     <th>价钱</th>
 9                 </tr>
10             </thead>
11             <tbody>
12                 <tr>
13                     <td><input type="checkbox"></td>
14                     <td>iPhone8</td>
15                     <td>8000</td>
16                 </tr>
17                 <tr>
18                     <td><input type="checkbox"></td>
19                     <td>iPad Pro</td>
20                     <td>5000</td>
21                 </tr>
22 
23                 <tr>
24                     <td><input type="checkbox"></td>
25                     <td>iPad Air</td>
26                     <td>2000</td>
27                 </tr>
28                 <tr>
29                     <td><input type="checkbox"></td>
30                     <td>Apple Watch</td>
31                     <td>2000</td>
32                 </tr>
33             </tbody>
34 
35         </table>
36 
37     </div>

样式部分

 1     <style>
 2         .con {
 3             width: 500px;
 4             margin: 100px auto
 5         }
 6         
 7         table {
 8             table-layout: fixed;
 9             border: 1px solid #333;
10             width: 100%;
11             border-collapse: collapse;
12         }
13         
14         thead {
15             background-color: aqua;
16             color: white;
17         }
18         
19         thead th:nth-child(1) {
20             width: 25%;
21         }
22         
23         thead th:nth-child(2) {
24             width: 50%;
25         }
26         
27         thead th:nth-child(3) {
28             width: 25%;
29         }
30         
31         th,
32         td {
33             text-align: center;
34             border: 1px solid #333;
35         }
36     </style>

js部分

 1     <script>
 2         //获取所有的复选框
 3         var cball = document.getElementById("j_cball");
 4         var checkboxes = document.querySelector("tbody").querySelectorAll("input");
 5         //console.log(checkboxes);
 6 
 7         cball.onclick = function() {
 8             //默认是没有被选中的
 9             //console.log(this.checked); 
10             for (var i = 0; i < checkboxes.length; i++) {
11                 checkboxes[i].checked = this.checked; //这里的this指的是被点击的全选按钮
12             }
13         }
14 
15         for (var i = 0; i < checkboxes.length; i++) {
16             //循环绑定事件
17             checkboxes[i].onclick = function() {
18                 //每次点击下面的复选框，看看其他所有的按钮有没有被选中              
19                 var flag = true;
20 
21                 for (var i = 0; i < checkboxes.length; i++) {
22                     if (!checkboxes[i].checked) {
23                         flag = false;
24                     }
25                 }
26                 cball.checked = flag;
27             }
28         }
29     </script>

js全选与取消全选

猜你喜欢