javaScript实现checkbox全选or取消全选

HTML结构：

<input type="checkbox" id="selectAll">
<input type="checkbox" class="item">
<input type="checkbox" class="item">
<input type="checkbox" class="item">

JavaScript代码：

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

// 监听全选框是否变化
selectAll.addEventListener('change', () => {
  items.forEach(item => {
    // 所有子复选框与全选框状态一致
    item.checked = selectAll.checked;
  });
});

// 循环遍历查看子复选框选中状态
items.forEach(item => {
  item.addEventListener('change', () => {
    // 全部子复选框都选中则为true，有未选中的则为false
    const allChecked = Array.from(items).every(item => item.checked);
    // 更改全选框状态
    selectAll.checked = allChecked;
  });
});

如果需要不断监控checkbox的选中状态，全选的逻辑能够自动更新，可以将items.forEach()的代码封装在一个函数中，并在需要更新全选状态时调用该函数，JavaScript部分代码更改为：

const selectAll = document.getElementById('selectAll');

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

selectAll.addEventListener('change', () => {
  updateSelectAll();
});

// 在程序启动时，首次调用updateSelectAll()函数，以初始化全选的状态。
updateSelectAll();