当前位置：首页 > JavaScript

js实现全部

2026-04-06 15:28:22JavaScript

JavaScript 实现全选功能

全选功能在网页开发中常见于表格、列表或多选框组。以下是一个完整的实现方法：

js实现全部

HTML 结构

js实现全部

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

JavaScript 实现

// 获取全选复选框和所有子复选框
const selectAll = document.getElementById('selectAll');
const checkboxes = document.querySelectorAll('.itemCheckbox');

// 全选复选框点击事件
selectAll.addEventListener('change', function() {
  checkboxes.forEach(checkbox => {
    checkbox.checked = this.checked;
  });
});

// 子复选框点击事件
checkboxes.forEach(checkbox => {
  checkbox.addEventListener('change', function() {
    // 当任意子复选框取消选中时，取消全选状态
    if (!this.checked) {
      selectAll.checked = false;
    }
    // 当所有子复选框都被选中时，自动勾选全选
    else {
      const allChecked = Array.from(checkboxes).every(cb => cb.checked);
      selectAll.checked = allChecked;
    }
  });
});

实现原理说明

通过事件监听器监控全选复选框的状态变化
当全选状态改变时，遍历所有子复选框并同步其选中状态
子复选框状态变化时，检查是否所有子项都被选中来更新全选状态

增强功能实现

如需更复杂的功能，可添加以下代码：

// 添加中间状态（部分选中）
selectAll.addEventListener('change', function() {
  const isIndeterminate = !this.checked && 
    Array.from(checkboxes).some(cb => cb.checked);

  this.indeterminate = isIndeterminate;
});