[line]题目如下[/line]
案例大致分析
- 点击全选按钮，所有的按钮都被选中
- 当下方按钮都被选中，全选按钮便被选中
- 有一个按钮没有选中，全选按钮便不会选中（循环检查）
代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="wrap">
<table>
<thead>
<tr>
<th>
<input type="checkbox" id="j_cbAll">
</th>
<th>商品</th>
<th>价钱</th>
</tr>
</thead>
<tbody id="j_tb">
<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>
</body>
</html>js部分
<script>
//1.全选和取消全选的做法
//获取元素
var j_cbAll = document.getElementById('j_cbAll');
var j_tbs = document.getElementById('j_tb').getElementsByTagName('input');
//注册事件
j_cbAll.onclick = function () {
for (var i = 0; i < j_tbs.length; i++) {
j_tbs[i].checked = this.checked;
}
}
//2.下面的复选按钮影响全选按钮
for (var i = 0; i < j_tbs.length; i++) {
j_tbs[i].onclick = function () {
//flag控制全选按钮是否选中
var flag = true;
//每次点击下面的复选框都要循环检查是否全被选中
for (var i = 0; i < j_tbs.length; i++) {
if (!j_tbs[i].checked) {
flag = false;
break;
}
}
j_cbAll.checked = flag;
}
}
</script>
© 版权声明
文章版权归作者所有，未经允许请勿转载。
THE END
暂无评论内容