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             /*每列首行的单元格大小决定该列单元格的宽度，保证表格不会变形但是文字多了会溢出 */
 9             table-layout: fixed;
10             border: 1px solid #333;
11             width: 100%;
12             border-collapse: collapse;
13         }
14         
15         thead {
16             background-color: aqua;
17             color: white;
18         }
19         
20         thead th:nth-child(1) {
21             width: 25%;
22         }
23         
24         thead th:nth-child(2) {
25             width: 50%;
26         }
27         
28         thead th:nth-child(3) {
29             width: 25%;
30         }
31         
32         th,
33         td {
34             text-align: center;
35             border: 1px solid #333;
36         }
37     </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>

posted on 2019-08-23 15:36  源氏西格玛  阅读(1462)  评论(0)  编辑  收藏  举报

导航