js实现全选反选

2026-04-04 02:12:10JavaScript

JavaScript 实现全选/反选功能

HTML 结构示例

创建一组复选框和一个控制全选/反选的按钮：

<input type="checkbox" id="selectAll">全选/取消全选<br>
<div id="checkboxGroup">
  <input type="checkbox" class="item">选项1<br>
  <input type="checkbox" class="item">选项2<br>
  <input type="checkbox" class="item">选项3<br>
</div>
<button id="toggleBtn">反选</button>

全选功能实现

通过监听全选复选框的change事件控制子选项：

js实现全选反选

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

反选功能实现

通过按钮点击事件反转所有子选项状态：

js实现全选反选

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

联动状态更新

当手动修改子选项时，自动更新全选复选框状态：

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

完整代码整合

将上述功能整合为完整实现：

<!DOCTYPE html>
<html>
<head>
  <title>全选反选示例</title>
</head>
<body>
  <input type="checkbox" id="selectAll">全选/取消全选<br>
  <div id="checkboxGroup">
    <input type="checkbox" class="item">选项1<br>
    <input type="checkbox" class="item">选项2<br>
    <input type="checkbox" class="item">选项3<br>
  </div>
  <button id="toggleBtn">反选</button>

  <script>
    // 全选控制
    document.getElementById('selectAll').addEventListener('change', function() {
      const items = document.querySelectorAll('.item');
      items.forEach(item => {
        item.checked = this.checked;
      });
    });

    // 反选功能
    document.getElementById('toggleBtn').addEventListener('click', function() {
      const items = document.querySelectorAll('.item');
      items.forEach(item => {
        item.checked = !item.checked;
      });
    });

    // 状态联动
    document.getElementById('checkboxGroup').addEventListener('change', function(e) {
      if (e.target.classList.contains('item')) {
        const allChecked = [...document.querySelectorAll('.item')]
          .every(item => item.checked);
        document.getElementById('selectAll').checked = allChecked;
      }
    });
  </script>
</body>
</html>