js实现全选功能

2026-04-04 07:00:11JavaScript

实现全选功能的 JavaScript 方法

HTML 结构示例 确保页面有一个全选复选框和一组子复选框：

<input type="checkbox" id="selectAll">全选
<div class="item-list">
  <input type="checkbox" class="item">选项1
  <input type="checkbox" class="item">选项2
  <input type="checkbox" class="item">选项3
</div>

方法1：基础全选逻辑 通过监听全选复选框的点击事件，批量设置子复选框状态：

js实现全选功能

document.getElementById('selectAll').addEventListener('click', function() {
  const items = document.querySelectorAll('.item');
  items.forEach(item => {
    item.checked = this.checked;
  });
});

方法2：动态联动检测 当子复选框状态变化时，自动更新全选按钮状态：

const items = document.querySelectorAll('.item');
items.forEach(item => {
  item.addEventListener('change', function() {
    const allChecked = [...items].every(item => item.checked);
    document.getElementById('selectAll').checked = allChecked;
  });
});

方法3：使用事件委托优化 对于动态生成的列表，建议使用事件委托：

js实现全选功能

document.querySelector('.item-list').addEventListener('change', function(e) {
  if (e.target.classList.contains('item')) {
    const items = document.querySelectorAll('.item');
    document.getElementById('selectAll').checked = 
      [...items].every(item => item.checked);
  }
});

注意事项

确保全选复选框与子复选框的DOM结构合理
动态添加元素时需要重新绑定事件或使用事件委托
移动端需注意触摸事件的兼容性处理

完整示例代码

<!DOCTYPE html>
<html>
<body>
  <input type="checkbox" id="selectAll">全选
  <div class="item-list">
    <input type="checkbox" class="item">选项1
    <input type="checkbox" class="item">选项2
    <input type="checkbox" class="item">选项3
  </div>

  <script>
    document.getElementById('selectAll').addEventListener('click', function() {
      const items = document.querySelectorAll('.item');
      items.forEach(item => item.checked = this.checked);
    });

    document.querySelector('.item-list').addEventListener('change', function(e) {
      if (e.target.classList.contains('item')) {
        const items = document.querySelectorAll('.item');
        document.getElementById('selectAll').checked = 
          [...items].every(item => item.checked);
      }
    });
  </script>
</body>
</html>