- 在表头
<thead>中，有一个全选复选框<input type="checkbox" name="" id="qx">。 - 在表体
<tbody>中，每一行商品信息<tr>中，都有一个对应的商品复选框<input type="checkbox" name="" id="">。
<div> <table> <thead> <tr> <th><input type="checkbox" name="" id="qx"></th> <th>商品</th> <th>价格</th> </tr> </thead> <tbody id="dx"> <tr> <td><input type="checkbox" name="" id=""></td> <td>手机</td> <td>2000</td> </tr> <tr> <td><input type="checkbox" name="" id=""></td> <td>电脑</td> <td>1500</td> </tr> <tr> <td><input type="checkbox" name="" id=""></td> <td>平板</td> <td>1000</td> </tr> </tbody> </table> </div>
- 首先通过
document.getElementById方法获取到全选复选框和所有商品复选框的元素。 - 给全选复选框
qx添加点击事件处理函数onclick。 - 在点击全选复选框时，通过循环遍历所有商品复选框
dx，将它们的checked属性设置为与全选复选框的checked属性相同，从而实现全选和反选效果。 - 接着，通过循环遍历每个商品复选框，并为它们添加点击事件处理函数。
- 在每个商品复选框被点击时，通过循环遍历所有商品复选框
dx，检查是否有未选中的商品复选框。如果存在未选中的商品复选框，则将全选复选框的checked属性设置为false，否则设置为true，从而实现全选和非全选的自动更新。
let qx = document.getElementById("qx"); let dx = document.getElementById("dx").getElementsByTagName("input"); qx.onclick = function() { for (i = 0; i < dx.length; i++) { dx[i].checked = this.checked; } } for (let i = 0; i < dx.length; i++) { dx[i].onclick = function() { let flag = true; for (let i = 0; i < dx.length; i++) { // !取反操作 if (!dx[i].checked) { flag = false; } } qx.checked = flag; } }
