js实现复选框的全选

2026-04-04 04:20:18JavaScript

实现全选功能的方法

使用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>

JavaScript实现

document.getElementById('selectAll').addEventListener('change', function() {
  const checkboxes = document.querySelectorAll('#checkboxGroup input[type="checkbox"]');
  checkboxes.forEach(checkbox => {
    checkbox.checked = this.checked;
  });
});

反选功能实现

如果需要实现反选功能，可以添加以下代码：

js实现复选框的全选

const checkboxes = document.querySelectorAll('#checkboxGroup input[type="checkbox"]');
checkboxes.forEach(checkbox => {
  checkbox.addEventListener('change', function() {
    const allChecked = [...checkboxes].every(cb => cb.checked);
    document.getElementById('selectAll').checked = allChecked;
  });
});

注意事项

确保全选复选框与其他复选框的ID或类名区分明确
使用事件委托可以提高性能，特别是当复选框数量较多时
考虑使用jQuery等库可以简化代码，但原生JavaScript实现更轻量

完整示例代码

<!DOCTYPE html>
<html>
<head>
  <title>复选框全选示例</title>
</head>
<body>
  <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>

  <script>
    document.getElementById('selectAll').addEventListener('change', function() {
      const checkboxes = document.querySelectorAll('#checkboxGroup input[type="checkbox"]');
      checkboxes.forEach(checkbox => {
        checkbox.checked = this.checked;
      });
    });

    const checkboxes = document.querySelectorAll('#checkboxGroup input[type="checkbox"]');
    checkboxes.forEach(checkbox => {
      checkbox.addEventListener('change', function() {
        const allChecked = [...checkboxes].every(cb => cb.checked);
        document.getElementById('selectAll').checked = allChecked;
      });
    });
  </script>
</body>
</html>