当前位置：首页 > JavaScript

js实现全选和反选

2026-01-30 19:58:21JavaScript

实现全选和反选功能

在JavaScript中实现全选和反选功能通常涉及操作复选框（checkbox）的checked属性。以下是常见的实现方法：

全选功能

通过遍历所有目标复选框，将它们的checked属性设置为true：

function selectAll() {
  const checkboxes = document.querySelectorAll('.item-checkbox');
  checkboxes.forEach(checkbox => {
    checkbox.checked = true;
  });
}

反选功能

通过遍历所有目标复选框，将它们的checked属性取反：

function invertSelection() {
  const checkboxes = document.querySelectorAll('.item-checkbox');
  checkboxes.forEach(checkbox => {
    checkbox.checked = !checkbox.checked;
  });
}

全选/反选复选框控制

通常需要一个主复选框来控制全选和反选：

const masterCheckbox = document.getElementById('master-checkbox');
masterCheckbox.addEventListener('change', function() {
  const checkboxes = document.querySelectorAll('.item-checkbox');
  checkboxes.forEach(checkbox => {
    checkbox.checked = this.checked;
  });
});

动态更新主复选框状态

当子复选框状态变化时，更新主复选框状态：

js实现全选和反选

const checkboxes = document.querySelectorAll('.item-checkbox');
checkboxes.forEach(checkbox => {
  checkbox.addEventListener('change', function() {
    const allChecked = [...checkboxes].every(cb => cb.checked);
    document.getElementById('master-checkbox').checked = allChecked;
  });
});

完整示例代码

<!DOCTYPE html>
<html>
<head>
  <title>全选/反选示例</title>
</head>
<body>
  <input type="checkbox" id="master-checkbox"> 全选/反选
  <hr>
  <input type="checkbox" class="item-checkbox"> 选项1
  <input type="checkbox" class="item-checkbox"> 选项2
  <input type="checkbox" class="item-checkbox"> 选项3

  <script>
    const masterCheckbox = document.getElementById('master-checkbox');
    const checkboxes = document.querySelectorAll('.item-checkbox');

    // 主复选框控制
    masterCheckbox.addEventListener('change', function() {
      checkboxes.forEach(checkbox => {
        checkbox.checked = this.checked;
      });
    });

    // 子复选框控制主复选框状态
    checkboxes.forEach(checkbox => {
      checkbox.addEventListener('change', function() {
        const allChecked = [...checkboxes].every(cb => cb.checked);
        masterCheckbox.checked = allChecked;
      });
    });
  </script>
</body>
</html>