JavaScript复选框联动异常：OptionC取消勾选后无法重新勾选

你的代码存在两个核心问题，导致OptionC无法被重新勾选：

1. 逻辑分支覆盖错误：第二个else if条件optionA.checked && optionB.checked && optionC.checked永远不会触发——因为第一个if已经在A、B同时勾选时将C设为false，不可能出现三者同时勾选的情况。
2. 强制重置逻辑干扰用户操作：else分支会在任何不满足前两个条件的场景下，强制将OptionC设为true。比如当A、B同时勾选导致C被取消后，如果你尝试勾选C，此时A、B仍处于勾选状态，第一个if会立刻把C改回false；而如果A或B其中一个未勾选，你手动取消C时，else分支又会强制把C恢复为勾选状态。

修复后的代码 #

<div>
  <input type="checkbox" id="optionA" name="optionA" />
  <label for="optionA">Option A</label>
  <input type="checkbox" id="optionB" name="optionB" />
  <label for="optionB">Option B</label>
  <input type="checkbox" id="optionC" name="optionC" />
  <label for="optionC">Option C</label>
</div>

const optionA = document.getElementById("optionA");
const optionB = document.getElementById("optionB");
const optionC = document.getElementById("optionC");

// 默认勾选OptionC
optionC.checked = true;

// 处理OptionA的点击事件
optionA.addEventListener("click", () => {
  // 当A和B同时勾选时，取消C
  if (optionA.checked && optionB.checked) {
    optionC.checked = false;
  }
});

// 处理OptionB的点击事件
optionB.addEventListener("click", () => {
  // 当A和B同时勾选时，取消C
  if (optionA.checked && optionB.checked) {
    optionC.checked = false;
  }
  // 当重新勾选B时，如果A是勾选状态，取消A
  if (optionB.checked && optionA.checked) {
    optionA.checked = false;
  }
});

// 处理OptionC的点击事件
optionC.addEventListener("click", () => {
  // 当重新勾选C时，如果B是勾选状态，取消B
  if (optionC.checked && optionB.checked) {
    optionB.checked = false;
  }
});

逻辑说明 #

• 点击OptionA：仅在A、B同时勾选时取消C，不干扰其他操作。
• 点击OptionB：先判断是否A、B同时勾选，若成立则取消C；同时如果B被勾选且A处于勾选状态，自动取消A，满足「重新勾选已取消的B时取消A」的需求。
• 点击OptionC：如果C被勾选且B处于勾选状态，自动取消B，满足「重新勾选已取消的C时取消B」的需求；同时不再强制重置C的状态，用户可以自由勾选/取消（只要不触发其他规则）。

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