自丢网
标题:
js表单全选取消全选案例
[打印本页]
作者:
admin
时间:
2020-2-14 09:13
标题:
js表单全选取消全选案例
业务需求:
1.点击上面全选复选框，下面所有的复选框都选中(全选)
2.再次点击全选复选框，下面所有的复选框都不中选(取消全选)
3.如果下面复选框全部选中，上面全选按钮就自动选中
4.如果下面复选框有一个没有选中，上面全选按钮就不选中
5.所有复选框一开始默认都没选中状态
(, 下载次数: 310)
上传
点击文件名下载附件
js案例代码：
<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>
<script>
var j_cbAll = document.querySelector('#j_cbAll');
var ipts = document.querySelector('#j_tb').querySelectorAll('input')
j_cbAll.onclick = function() {
for (var i = 0; i < ipts.length; i++) {
ipts[i].checked = this.checked;
}
}
for (var i = 0; i < ipts.length; i++) {
ipts[i].onclick = function() {
flag = true;
for (i = 0; i < ipts.length; i++) {
if (!ipts[i].checked) {
flag = false;
break;
}
}
j_cbAll.checked = flag;
}
}
</script>
</body>
复制代码
break在这里提高效率。
欢迎光临 自丢网 (https://www.zidiu.com/)
Powered by Discuz! X3.5