表单全选及取消全选
表单全选在实际网页开发中是非常常用的一个功能,常用在商品全选时,其描述如下:
当点击全选按钮时,表单内容会被全选,再次点击会取消全选,下面我们用一个例子演示一下。
例子
当我们点击全选按钮,商品全选
![](https://img.laitimes.com/img/9ZDMuAjOiMmIsIjOiQnIsIyZuBnL2QDO0UTMxEjMxEzNwEjMwIzLc52YucWbp5GZzNmLn9Gbi1yZtl2Lc9CX6MHc0RHaiojIsJye.png)
再次点击取消全选
HTML部分
<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>iphone 12</td>
<td>8000</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>iphone 12</td>
<td>8000</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>iphone 12</td>
<td>8000</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>iphone 12</td>
<td>8000</td>
</tr>
</tbody>
</table>
</div>
JS部分
1、获取全选标签及其他表单标签元素
2、注册事件:当点击全选,依次使其他表单标签被选中。如果点击了其他表单标签,检查是否都被选中,来确定全选标签是否要被选中。
<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;
}
}
for(var i = 0; i < j_tbs.length; i++) {
j_tbs[i].onclick = function() {
//每次点击都要检查
var flag = true;
for(var j = 0; j<j_tbs.length; j++) {
if(!j_tbs[j].checked) {
flag = false;
break;
}
}
j_cbAll.checked = flag;
}
}
</script>
效果可以自行运行哦_