實現全選與取消全選的效果
要求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>