JavaScript实现checkbox全选功能失效，如何排查问题？

原有代码的核心问题 #

• 变量wishAllCheck是页面初始化时一次性计算的静态布尔值，点击全选框时不会动态更新，导致判断逻辑完全失效。且布尔值本身没有DOM操作方法，你后续对它调用removeAttribute、setAttribute会直接抛出JS错误。
• querySelectorAll('.wish_sub')返回的是DOM节点集合，不是单个元素，直接对集合调用DOM方法或赋值checked属性不会生效，需要遍历集合中的每个子checkbox单独操作。
• 混淆了HTML属性（attribute）和DOM属性（property）：checked的HTML attribute仅代表初始默认状态，交互时的实时勾选状态应该直接操作DOM元素的.checked布尔属性，不需要增删HTML attribute。

正确实现代码 #

// 获取DOM元素
const wishAll = document.querySelector('.wish_all');
const wishSubList = document.querySelectorAll('.wish_sub');

// 监听全选框点击事件
wishAll.addEventListener('click', function () {
  // 每次点击都取全选框当前的实时勾选状态
  const isChecked = wishAll.checked;
  // 遍历所有子checkbox同步状态
  wishSubList.forEach(subCheckbox => {
    subCheckbox.checked = isChecked;
  });
});

可选优化：子checkbox全部勾选时自动同步全选框状态 #

// 给每个子checkbox添加监听
wishSubList.forEach(subCheckbox => {
  subCheckbox.addEventListener('click', function () {
    // 判断所有子checkbox是否都已勾选
    const allSubChecked = Array.from(wishSubList).every(item => item.checked);
    wishAll.checked = allSubChecked;
  });
});

内容的提问来源于stack exchange，提问作者gb yoon