实现全选与取消全选的效果
要求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>