JS用DOM表单全选取消全选案例 务需求: 点击上面全选复选框,下面所有的复选框都选中(全选) 再次点击全选复选框,下面所有的复选框都不中选(取消全选) 如果下面复选框全部选中,上面全选按钮就自动选中 如果下面复选框有一个没有选中,上面全选按钮就不选中 所有复选框一开始默认都没选中状态
时间: 2023-08-05 12:26:47 浏览: 59
HTML代码:
```
<input type="checkbox" id="checkAll">全选
<input type="checkbox" class="singleCheck">选项1
<input type="checkbox" class="singleCheck">选项2
<input type="checkbox" class="singleCheck">选项3
```
JavaScript代码:
```
//获取全选复选框和所有单选复选框
var checkAll = document.getElementById("checkAll");
var singleChecks = document.getElementsByClassName("singleCheck");
//为全选复选框添加点击事件
checkAll.onclick = function(){
//判断全选复选框是否选中
if(checkAll.checked){
//将所有单选复选框都选中
for(var i=0; i<singleChecks.length; i++){
singleChecks[i].checked = true;
}
}else{
//将所有单选复选框都取消选中
for(var i=0; i<singleChecks.length; i++){
singleChecks[i].checked = false;
}
}
}
//为所有单选复选框添加点击事件
for(var i=0; i<singleChecks.length; i++){
singleChecks[i].onclick = function(){
var flag = true; //标记是否所有单选复选框都选中
for(var j=0; j<singleChecks.length; j++){
if(!singleChecks[j].checked){
flag = false;
break;
}
}
if(flag){
checkAll.checked = true; //全选复选框选中
}else{
checkAll.checked = false; //全选复选框取消选中
}
}
}
```
这样就可以实现全选和取消全选的功能,以及自动判断全选复选框是否选中。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)