如何给checkbox所属的类添加全选的功能
时间: 2024-03-09 13:48:29 浏览: 12
可以使用JavaScript来给一个类中的多个checkbox添加全选的功能。下面是一个简单的示例代码,展示如何实现这个功能。
HTML代码:
```html
<div>
<label>
<input type="checkbox" class="item-checkbox">
项目1
</label>
<br>
<label>
<input type="checkbox" class="item-checkbox">
项目2
</label>
<br>
<label>
<input type="checkbox" class="item-checkbox">
项目3
</label>
<br>
<label>
<input type="checkbox" id="all-checkbox">
全选
</label>
</div>
```
JavaScript代码:
```javascript
const itemCheckboxes = document.querySelectorAll('.item-checkbox');
const allCheckbox = document.querySelector('#all-checkbox');
allCheckbox.addEventListener('click', function() {
itemCheckboxes.forEach(checkbox => {
checkbox.checked = allCheckbox.checked;
});
});
itemCheckboxes.forEach(checkbox => {
checkbox.addEventListener('click', function() {
const checkedCount = document.querySelectorAll('.item-checkbox:checked').length;
allCheckbox.checked = checkedCount === itemCheckboxes.length;
});
});
```
这段代码会给一个类中的多个checkbox添加全选的功能,点击全选复选框可以选中所有项目的复选框,同时选中所有项目的复选框可以选中全选的复选框。JavaScript代码中,我们首先获取到所有的项目复选框和全选复选框,然后给全选复选框添加点击事件,点击全选复选框时将所有项目复选框的选中状态与全选复选框的选中状态同步。然后给每个项目复选框添加点击事件,点击项目复选框时计算已选中的项目复选框数量,如果数量等于所有项目复选框的数量,将全选复选框选中,否则将全选复选框取消选中。