js实现全选反选

实现全选和反选功能

全选和反选是表单操作中常见的功能，可以通过JavaScript轻松实现。以下是两种常见的实现方式：

HTML结构示例

<input type="checkbox" id="selectAll">全选
<div id="checkboxGroup">
  <input type="checkbox" name="item" value="1">选项1
  <input type="checkbox" name="item" value="2">选项2
  <input type="checkbox" name="item" value="3">选项3
</div>
<button id="reverseSelect">反选</button>

方法一：基础实现

// 获取DOM元素
const selectAll = document.getElementById('selectAll');
const checkboxes = document.querySelectorAll('#checkboxGroup input[type="checkbox"]');
const reverseBtn = document.getElementById('reverseSelect');

// 全选功能
selectAll.addEventListener('change', function() {
  checkboxes.forEach(checkbox => {
    checkbox.checked = this.checked;
  });
});

// 反选功能
reverseBtn.addEventListener('click', function() {
  checkboxes.forEach(checkbox => {
    checkbox.checked = !checkbox.checked;
  });
  updateSelectAllStatus();
});

// 更新全选状态
function updateSelectAllStatus() {
  const allChecked = Array.from(checkboxes).every(checkbox => checkbox.checked);
  selectAll.checked = allChecked;
}

// 监听单个复选框变化
checkboxes.forEach(checkbox => {
  checkbox.addEventListener('change', updateSelectAllStatus);
});

方法二：使用事件委托优化

document.addEventListener('DOMContentLoaded', function() {
  const container = document.getElementById('checkboxGroup');
  const selectAll = document.getElementById('selectAll');
  const reverseBtn = document.getElementById('reverseSelect');

  // 事件委托处理复选框点击
  container.addEventListener('change', function(e) {
    if(e.target.type === 'checkbox') {
      const checkboxes = container.querySelectorAll('input[type="checkbox"]');
      selectAll.checked = Array.from(checkboxes).every(cb => cb.checked);
    }
  });

  // 全选功能
  selectAll.addEventListener('change', function() {
    const checkboxes = container.querySelectorAll('input[type="checkbox"]');
    checkboxes.forEach(checkbox => {
      checkbox.checked = this.checked;
    });
  });

  // 反选功能
  reverseBtn.addEventListener('click', function() {
    const checkboxes = container.querySelectorAll('input[type="checkbox"]');
    checkboxes.forEach(checkbox => {
      checkbox.checked = !checkbox.checked;
    });
    selectAll.checked = Array.from(checkboxes).every(cb => cb.checked);
  });
});

注意事项

1. 确保DOM加载完成后再执行JavaScript代码，可以将代码放在DOMContentLoaded事件中或放在body末尾

2. 使用事件委托可以减少事件监听器的数量，提高性能

   

3. 全选复选框的状态应该与所有子复选框的状态同步

4. 反选操作后需要更新全选复选框的状态

5. 考虑添加防抖或节流处理，如果复选框数量很多

这些实现方式适用于大多数Web应用场景，可以根据实际需求进行调整和扩展。