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>
