当前位置：首页 > JavaScript

js实现全选和反选

2026-04-04 11:45:44JavaScript

实现全选功能

通过设置所有复选框的checked属性为true实现全选：

js实现全选和反选

function selectAll() {
  const checkboxes = document.querySelectorAll('input[type="checkbox"]');
  checkboxes.forEach(checkbox => {
    checkbox.checked = true;
  });
}

实现反选功能

遍历所有复选框，将当前选中状态取反：

js实现全选和反选

function invertSelection() {
  const checkboxes = document.querySelectorAll('input[type="checkbox"]');
  checkboxes.forEach(checkbox => {
    checkbox.checked = !checkbox.checked;
  });
}

全选/反选控制按钮

通常需要一个主复选框控制所有子复选框的状态：

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

动态响应子项变化

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

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

完整示例代码

<input type="checkbox" id="master-checkbox"> 全选/反选
<div class="checkbox-group">
  <input type="checkbox" class="item-checkbox"> 选项1
  <input type="checkbox" class="item-checkbox"> 选项2
  <input type="checkbox" class="item-checkbox"> 选项3
</div>

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

  masterCheckbox.addEventListener('change', function() {
    itemCheckboxes.forEach(checkbox => {
      checkbox.checked = this.checked;
    });
  });

  itemCheckboxes.forEach(checkbox => {
    checkbox.addEventListener('change', function() {
      const allChecked = [...itemCheckboxes].every(cb => cb.checked);
      masterCheckbox.checked = allChecked;
    });
  });
</script>