当前位置：首页 > JavaScript

js实现全选反选

2026-03-01 01:40:04JavaScript

实现全选与反选功能

全选和反选是表单操作中常见的功能，可以通过JavaScript动态控制复选框的状态。以下是两种典型实现方式：

基础DOM操作实现

// 获取全选复选框和子复选框
const selectAll = document.getElementById('selectAll');
const checkboxes = document.querySelectorAll('.item-checkbox');

// 全选逻辑
selectAll.addEventListener('change', function() {
  checkboxes.forEach(checkbox => {
    checkbox.checked = this.checked;
  });
});

// 子复选框逻辑
checkboxes.forEach(checkbox => {
  checkbox.addEventListener('change', function() {
    selectAll.checked = [...checkboxes].every(c => c.checked);
  });
});

反选功能扩展

// 反选按钮事件
document.getElementById('invertSelect').addEventListener('click', function() {
  checkboxes.forEach(checkbox => {
    checkbox.checked = !checkbox.checked;
  });
  updateSelectAllState();
});

// 更新全选状态函数
function updateSelectAllState() {
  selectAll.checked = [...checkboxes].every(c => c.checked);
}

注意事项

确保HTML结构包含全选复选框和带有统一class的子复选框
事件委托方式更适合动态生成的列表
现代框架如Vue/React可通过数据绑定更简洁地实现

<!-- 基础HTML结构示例 -->
<input type="checkbox" id="selectAll">全选
<button id="invertSelect">反选</button>
<div class="item-list">
  <input type="checkbox" class="item-checkbox">选项1
  <input type="checkbox" class="item-checkbox">选项2
</div>