js实现全部

JavaScript 实现全选功能

全选功能在网页开发中常见于表格、列表或多选框组。以下是一个完整的实现方法：

HTML 结构

<input type="checkbox" id="selectAll"> 全选
<div id="checkboxGroup">
  <input type="checkbox" class="itemCheckbox"> 选项1
  <input type="checkbox" class="itemCheckbox"> 选项2
  <input type="checkbox" class="itemCheckbox"> 选项3
</div>

JavaScript 实现

// 获取全选复选框和所有子复选框
const selectAll = document.getElementById('selectAll');
const checkboxes = document.querySelectorAll('.itemCheckbox');

// 全选复选框点击事件
selectAll.addEventListener('change', function() {
  checkboxes.forEach(checkbox => {
    checkbox.checked = this.checked;
  });
});

// 子复选框点击事件
checkboxes.forEach(checkbox => {
  checkbox.addEventListener('change', function() {
    // 当任意子复选框取消选中时，取消全选状态
    if (!this.checked) {
      selectAll.checked = false;
    }
    // 当所有子复选框都被选中时，自动勾选全选
    else {
      const allChecked = Array.from(checkboxes).every(cb => cb.checked);
      selectAll.checked = allChecked;
    }
  });
});

实现原理说明

1. 通过事件监听器监控全选复选框的状态变化
2. 当全选状态改变时，遍历所有子复选框并同步其选中状态
3. 子复选框状态变化时，检查是否所有子项都被选中来更新全选状态

增强功能实现

如需更复杂的功能，可添加以下代码：

// 添加中间状态（部分选中）
selectAll.addEventListener('change', function() {
  const isIndeterminate = !this.checked && 
    Array.from(checkboxes).some(cb => cb.checked);

  this.indeterminate = isIndeterminate;
});

注意事项

1. 确保DOM加载完成后再执行JavaScript代码
2. 动态添加的复选框需要重新绑定事件
3. 性能优化：对于大量复选框建议使用事件委托

兼容性处理

该方法兼容现代浏览器，如需支持IE等老旧浏览器，可能需要polyfill或调整语法。