实现全选与取消全选的效果
要求1(将军影响士兵)：点击全选按钮，下面的复选框全部选中，取消全选按钮，下面的复选框全部取消
思路：复选框是否被选中，取决于check属性,将全选按钮的check属性值赋值给下面所有复选框的check值
要求2（士兵影响将军）: 当下面的某个复选框没有被选中时，全选按钮自动变为没被选中状态；当下面的所有复选框被选中时，全选按钮自动被选中
首先，写出如下的表格：
布局部分：
<body>
<div class="con">
<table>
<thead>
<tr>
<th><input type="checkbox" id="j_cball"></th>
<th>商品</th>
<th>价钱</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox"></td>
<td>iPhone8</td>
<td>8000</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>iPad Pro</td>
<td>5000</td>
</tr> <tr>
<td><input type="checkbox"></td>
<td>iPad Air</td>
<td>2000</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>Apple Watch</td>
<td>2000</td>
</tr>
</tbody> </table> </div>
样式部分
<style>
.con {
width: 500px;
margin: 100px auto
} table {
/*每列首行的单元格大小决定该列单元格的宽度，保证表格不会变形但是文字多了会溢出 */
table-layout: fixed;
border: 1px solid #333;
width: 100%;
border-collapse: collapse;
} thead {
background-color: aqua;
color: white;
} thead th:nth-child(1) {
width: 25%;
} thead th:nth-child(2) {
width: 50%;
} thead th:nth-child(3) {
width: 25%;
} th,
td {
text-align: center;
border: 1px solid #333;
}
</style>
js部分
<script>
//获取所有的复选框
var cball = document.getElementById("j_cball");
var checkboxes = document.querySelector("tbody").querySelectorAll("input");
//console.log(checkboxes); cball.onclick = function() {
//默认是没有被选中的
//console.log(this.checked);
for (var i = 0; i < checkboxes.length; i++) {
checkboxes[i].checked = this.checked; //这里的this指的是被点击的全选按钮
}
} for (var i = 0; i < checkboxes.length; i++) {
//循环绑定事件
checkboxes[i].onclick = function() {
//每次点击下面的复选框，看看其他所有的按钮有没有被选中
var flag = true; for (var i = 0; i < checkboxes.length; i++) {
if (!checkboxes[i].checked) {
flag = false;
}
}
cball.checked = flag;
}
}
</script>