如何实现Checkbox全选框与选项框的双向联动功能？

问题背景 #

已实现全选框点击选中/取消所有选项的基础功能，需要补充以下逻辑：

• 取消任意一个选项时，全选框自动取消选中
• 手动选中所有选项（未点击全选框）时，全选框自动选中

修改后的完整代码 #

HTML #

<div class="container">
  <input type="checkbox" id="check-all" onchange="checkAll()">
  <label for="check-all">Select All</label>
  <br/>
  <input type="checkbox" id="option-a">
  <label for="option-a">Option A</label>
  <br/>
  <input type="checkbox" id="option-b">
  <label for="option-b">Option B</label>
  <br/>
  <input type="checkbox" id="option-c">
  <label for="option-c">Option C</label>
  <br/>
</div>

CSS #

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  display: grid;
  place-content: center;
}

input[type="checkbox"] {
  margin-bottom: 10px;
  cursor: pointer;
}

input[type="checkbox"]:not(:first-child) {
  margin-left: 20px;
}

JavaScript #

const checkAllBox = document.getElementById('check-all');
const optionBoxes = document.querySelectorAll("input[type='checkbox']:not(#check-all)");

// 全选/取消全选逻辑
function checkAll() {
  const isChecked = checkAllBox.checked;
  optionBoxes.forEach(box => box.checked = isChecked);
}

// 更新全选框状态的逻辑
function updateCheckAllStatus() {
  // 检查所有选项是否都被选中
  const allOptionsChecked = Array.from(optionBoxes).every(box => box.checked);
  checkAllBox.checked = allOptionsChecked;
}

// 给每个选项框绑定状态变化事件
optionBoxes.forEach(box => {
  box.addEventListener('change', updateCheckAllStatus);
});

关键逻辑说明 #

1. 元素区分：将全选框和普通选项框分开获取，避免操作时互相干扰
2. 全选逻辑优化：只对普通选项框进行选中/取消操作，无需处理全选框自身
3. 选项状态监听：给每个普通选项框添加change事件监听，每次状态变化时检查所有选项的选中情况
4. 自动更新全选框：使用Array.from()将NodeList转为数组，通过every()方法判断所有选项是否都被选中，以此更新全选框的状态

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