js实现全选和反选
实现全选和反选功能
在JavaScript中实现全选和反选功能通常涉及操作复选框（checkbox）的checked属性。以下是常见的实现方法：
全选功能
通过遍历所有目标复选框，将它们的checked属性设置为true：
function selectAll() {
const checkboxes = document.querySelectorAll('.item-checkbox');
checkboxes.forEach(checkbox => {
checkbox.checked = true;
});
}反选功能
通过遍历所有目标复选框，将它们的checked属性取反：
function invertSelection() {
const checkboxes = document.querySelectorAll('.item-checkbox');
checkboxes.forEach(checkbox => {
checkbox.checked = !checkbox.checked;
});
}全选/反选复选框控制
通常需要一个主复选框来控制全选和反选：
const masterCheckbox = document.getElementById('master-checkbox');
masterCheckbox.addEventListener('change', function() {
const checkboxes = document.querySelectorAll('.item-checkbox');
checkboxes.forEach(checkbox => {
checkbox.checked = this.checked;
});
});动态更新主复选框状态
当子复选框状态变化时，更新主复选框状态：
const checkboxes = document.querySelectorAll('.item-checkbox');
checkboxes.forEach(checkbox => {
checkbox.addEventListener('change', function() {
const allChecked = [...checkboxes].every(cb => cb.checked);
document.getElementById('master-checkbox').checked = allChecked;
});
});完整示例代码
<!DOCTYPE html>
<html>
<head>
<title>全选/反选示例</title>
</head>
<body>
<input type="checkbox" id="master-checkbox"> 全选/反选
<hr>
<input type="checkbox" class="item-checkbox"> 选项1
<input type="checkbox" class="item-checkbox"> 选项2
<input type="checkbox" class="item-checkbox"> 选项3
<script>
const masterCheckbox = document.getElementById('master-checkbox');
const checkboxes = document.querySelectorAll('.item-checkbox');
// 主复选框控制
masterCheckbox.addEventListener('change', function() {
checkboxes.forEach(checkbox => {
checkbox.checked = this.checked;
});
});
// 子复选框控制主复选框状态
checkboxes.forEach(checkbox => {
checkbox.addEventListener('change', function() {
const allChecked = [...checkboxes].every(cb => cb.checked);
masterCheckbox.checked = allChecked;
});
});
</script>
</body>
</html>注意事项
- 确保为复选框元素添加合适的类名或ID以便选择
- 考虑使用事件委托来提高性能，特别是当复选框数量较多时
- 在实际应用中，可能需要将选中的项ID收集起来用于后续操作
