当前位置：首页 > JavaScript

js实现复选框的全选

2026-03-01 03:46:12JavaScript

实现复选框全选功能

在JavaScript中实现复选框的全选功能，可以通过监听全选复选框的状态变化，并同步设置其他复选框的状态。

HTML结构示例

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

JavaScript实现

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

// 监听全选复选框的变化
selectAll.addEventListener('change', function() {
  checkboxes.forEach(checkbox => {
    checkbox.checked = this.checked;
  });
});

// 监听子复选框变化，更新全选状态
checkboxes.forEach(checkbox => {
  checkbox.addEventListener('change', function() {
    selectAll.checked = [...checkboxes].every(cb => cb.checked);
  });
});

实现反选功能

可以在全选功能基础上增加反选功能，快速切换所有复选框状态。

HTML增加反选按钮

<button id="invertSelection">反选</button>

JavaScript实现反选

document.getElementById('invertSelection').addEventListener('click', function() {
  checkboxes.forEach(checkbox => {
    checkbox.checked = !checkbox.checked;
  });
  updateSelectAll();
});

function updateSelectAll() {
  selectAll.checked = [...checkboxes].every(cb => cb.checked);
}

处理动态添加的复选框

如果页面会动态添加复选框，可以使用事件委托方式监听变化。

document.getElementById('checkboxGroup').addEventListener('change', function(e) {
  if(e.target.classList.contains('item')) {
    updateSelectAll();
  }
});

使用jQuery简化实现

如果项目中使用了jQuery库，实现会更加简洁。

js实现复选框的全选

$('#selectAll').change(function() {
  $('.item').prop('checked', this.checked);
});

$('.item').change(function() {
  $('#selectAll').prop('checked', $('.item:checked').length === $('.item').length);
});

这些方法可以根据实际需求进行组合和扩展，实现更复杂的复选框交互逻辑。