全选js实现

全选功能的实现方法

方法一：使用 querySelectorAll 和 forEach 通过选择所有目标元素并设置 checked 属性为 true 实现全选。

document.getElementById('selectAll').addEventListener('click', function() {
  const checkboxes = document.querySelectorAll('.item-checkbox');
  checkboxes.forEach(checkbox => {
    checkbox.checked = true;
  });
});

方法二：利用 propagate 事件 通过事件委托实现批量操作，适用于动态生成的元素。

document.addEventListener('click', function(e) {
  if (e.target.id === 'selectAll') {
    const checkboxes = document.querySelectorAll('.item-checkbox');
    checkboxes.forEach(checkbox => {
      checkbox.checked = e.target.checked;
    });
  }
});

方法三：表单内全选 针对表单内的复选框，直接操作表单的 elements 集合。

document.getElementById('selectAll').addEventListener('change', function() {
  const form = document.getElementById('myForm');
  for (let element of form.elements) {
    if (element.type === 'checkbox') {
      element.checked = this.checked;
    }
  }
});

注意事项

• 确保复选框具有相同的类名或属性便于批量选择。
• 动态生成的元素需使用事件委托或重新绑定事件。
• 全选按钮与单个复选框的状态同步需额外逻辑处理。