js复选框全选和全不选代码
时间: 2024-04-08 14:30:53 浏览: 182
复选框全选全不选JS代码
当用户点击全选复选框时,可以使用以下代码实全选和全不:
HTML:
```html<input type="checkbox" id="selectAll"> 全选
<br>
<input typecheckbox" class="checkbox"> 选项1
<br>
<input type="checkbox" class="checkbox"> 选项2
<br>
<input type="checkbox" class="checkbox"> 选项3
```
JavaScript:
```javascript
const selectAllCheckbox = document.getElementById('selectAll');
const checkboxes = document.querySelectorAll('.checkbox');
selectAllCheckbox.addEventListener('change', function () {
checkboxes.forEach(function (checkbox) {
checkbox.checked = selectAllCheckbox.checked;
});
});
```
上述代码中,我们首先通过 `getElementById` 方法获取全选复选框的引用,并使用 `querySelectorAll` 方法获取所有选项复选框的引用。然后,我们在全选复选框上添加 `change` 事件监听器,当全选复选框的状态改变时,触发该事件回调函数。在回调函数中,我们使用 `forEach` 方法遍历所有选项复选框,并将它们的 `checked` 属性设置为与全选复选框相同的值,从而实现全选和全不选的功能。
请注意,上述代码仅为示例,你需要根据你的具体HTML结构和需求进行相应的调整。
阅读全文