前端一个按钮实现全选/全不选功能
时间: 2023-09-13 17:12:43 浏览: 64
可以通过以下方式实现:
HTML:
```html
<!-- 假设你有一组 checkbox,它们的 class 都是 "checkbox-item" -->
<input type="checkbox" id="check-all" /> 全选/全不选
<input type="checkbox" class="checkbox-item" />
<input type="checkbox" class="checkbox-item" />
<input type="checkbox" class="checkbox-item" />
<!-- 其他 checkbox 组成的列表 -->
```
JS:
```javascript
var checkAll = document.getElementById('check-all');
var checkBoxItems = document.querySelectorAll('.checkbox-item');
checkAll.addEventListener('change', function() {
var isChecked = checkAll.checked;
for (var i = 0; i < checkBoxItems.length; i++) {
checkBoxItems[i].checked = isChecked;
}
});
for (var i = 0; i < checkBoxItems.length; i++) {
checkBoxItems[i].addEventListener('change', function() {
var isAllChecked = true;
for (var j = 0; j < checkBoxItems.length; j++) {
if (!checkBoxItems[j].checked) {
isAllChecked = false;
break;
}
}
checkAll.checked = isAllChecked;
});
}
```
解释一下,首先获取全选/全不选按钮和所有的 checkbox,然后给全选/全不选按钮添加 change 事件监听器,在事件处理函数中,将所有的 checkbox 的 checked 属性值设为当前全选/全不选按钮的 checked 属性值。
同时,给每个 checkbox 添加 change 事件监听器,在事件处理函数中,先遍历所有 checkbox 确定是否有未选中的,如果有就不是全选状态,否则就是全选状态,将全选/全不选按钮的 checked 属性值设为对应的状态即可。
相关推荐
![js](https://img-home.csdnimg.cn/images/20210720083646.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)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)