当前位置：首页 > JavaScript

js实现复选框的全选

2026-01-30 12:40:36JavaScript

实现复选框全选功能

在JavaScript中实现复选框的全选功能，可以通过以下方法完成。假设有一个全选复选框和多个子复选框。

js实现复选框的全选

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>

方法1：通过事件监听实现

document.getElementById('selectAll').addEventListener('change', function() {
  const items = document.querySelectorAll('.item');
  items.forEach(item => {
    item.checked = this.checked;
  });
});

方法2：添加子复选框的反向控制

当子复选框全部选中时，自动勾选全选复选框；反之取消全选。

js实现复选框的全选

const items = document.querySelectorAll('.item');
items.forEach(item => {
  item.addEventListener('change', function() {
    const allChecked = Array.from(items).every(item => item.checked);
    document.getElementById('selectAll').checked = allChecked;
  });
});

方法3：使用事件委托优化性能

对于动态生成的复选框，使用事件委托可以避免重复绑定事件。

document.getElementById('checkboxGroup').addEventListener('change', function(e) {
  if (e.target.classList.contains('item')) {
    const items = document.querySelectorAll('.item');
    document.getElementById('selectAll').checked = 
      Array.from(items).every(item => item.checked);
  }
});

方法4：jQuery实现版本

如果使用jQuery库，代码会更简洁。

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

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

以上方法可以根据实际需求选择使用。纯JavaScript版本兼容性更好，jQuery版本代码更简洁。动态生成的复选框建议使用事件委托方式处理。