js全选复选框怎么实现

实现全选复选框的方法

使用事件监听和属性操作实现全选功能。通过监听全选复选框的change事件，动态设置其他复选框的checked属性。

<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>

const selectAll = document.getElementById('selectAll');
const items = document.querySelectorAll('.item');

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

反选功能实现

添加对子复选框的监听，当子复选框状态变化时，自动更新全选复选框的状态。通过检查子复选框的选中数量是否等于总数来决定全选复选框的状态。

items.forEach(item => {
  item.addEventListener('change', function() {
    const allChecked = [...items].every(item => item.checked);
    selectAll.checked = allChecked;
  });
});

使用事件委托优化性能

对于大量复选框的情况，采用事件委托方式减少事件监听器数量，提升性能。通过父元素监听change事件，再根据目标元素类型进行处理。

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

使用jQuery简化实现

如果项目中已引入jQuery，可以使用更简洁的语法实现相同功能。

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

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

注意事项

确保DOM加载完成后再执行脚本，可以将代码放在DOMContentLoaded事件中或文档底部。对于动态添加的复选框，需要重新绑定事件或使用事件委托。

document.addEventListener('DOMContentLoaded', function() {
  // 初始化代码
});