当前位置：首页 > JavaScript

js实现全选和全不选

2026-02-28 20:46:27JavaScript

实现全选和全不选功能

通过JavaScript实现全选和全不选功能，通常需要操作复选框（checkbox）的checked属性。以下是具体实现方法：

HTML结构示例

js实现全选和全不选

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

基础实现方式

全选控制逻辑

js实现全选和全不选

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

反向联动控制 当手动取消某个子选项时，自动取消全选状态：

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

进阶实现方案

封装为可复用函数

function setupCheckboxGroup(selectAllId, itemClass) {
  const master = document.getElementById(selectAllId);
  const slaves = document.querySelectorAll(`.${itemClass}`);

  master.addEventListener('change', () => {
    slaves.forEach(slave => slave.checked = master.checked);
  });

  slaves.forEach(slave => {
    slave.addEventListener('change', () => {
      master.checked = [...slaves].every(s => s.checked);
    });
  });
}

// 调用示例
setupCheckboxGroup('selectAll', 'item');

注意事项

确保DOM加载完成后再执行脚本，可以将代码放在DOMContentLoaded事件中或置于<body>末尾
对于动态添加的复选框，需要使用事件委托或重新绑定事件
考虑添加中间状态（部分选中）时，可修改全选框为indeterminate状态：
```
master.indeterminate = checkedCount > 0 && checkedCount < slaves.length;
```

完整示例代码

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

  <script>
    document.addEventListener('DOMContentLoaded', function() {
      const master = document.getElementById('selectAll');
      const slaves = document.querySelectorAll('.item');

      master.addEventListener('change', function() {
        slaves.forEach(slave => {
          slave.checked = this.checked;
        });
      });

      slaves.forEach(slave => {
        slave.addEventListener('change', function() {
          const allChecked = [...slaves].every(s => s.checked);
          master.checked = allChecked;
        });
      });
    });
  </script>
</body>
</html>