js表单全选和取消案例
时间: 2024-06-14 14:06:03 浏览: 16
以下是一个JavaScript实现表单全选和取消的案例:
```javascript
// 获取全选复选框元素
var selectAllCheckbox = document.getElementById("selectAll");
// 获取所有子复选框元素
var checkboxes = document.querySelectorAll("input[type='checkbox']");
// 给全选复选框绑定点击事件
selectAllCheckbox.addEventListener("click", function() {
// 遍历所有子复选框
for (var i = 0; i < checkboxes.length; i++) {
// 设置子复选框的选中状态与全选复选框一致
checkboxes[i].checked = selectAllCheckbox.checked;
}
});
// 给子复选框绑定点击事件
for (var i = 0; i < checkboxes.length; i++) {
checkboxes[i].addEventListener("click", function() {
// 检查是否所有子复选框都被选中
var allChecked = true;
for (var j = 0; j < checkboxes.length; j++) {
if (!checkboxes[j].checked) {
allChecked = false;
break;
}
}
// 设置全选复选框的选中状态
selectAllCheckbox.checked = allChecked;
});
}
```
相关推荐
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.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)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![7z](https://img-home.csdnimg.cn/images/20210720083312.png)