javascript - 复选框未通过 JavaScript 检查

Question

---

我正在做一个元素，出现了一些情况:

• 默认情况下会选中选项C 当有人选中选项A并且 optionB 然后 optionC 应该取消选中 当有人选中 optionC 时 取消选中后，选项B应该取消选中当有人检查时

取消选中选项B后，应取消选中选项A——仅此而已! 这是我的代码:

var optionA = document.getElementById("optionA");
var optionB = document.getElementById("optionB");
var optionC = document.getElementById("optionC");
optionC.checked = true;
[ optionA, optionB, optionC ].forEach(function(option) {
   option.addEventListener("click", function() {
      if(optionA.checked && optionB.checked){
        optionC.checked = false;
      }
     else if(optionA.checked && optionB.checked && optionC.checked){
       optionB.checked = false;
     }
       //Here also Code is missing
     else{
  optionC.checked = true;
     }
   });
});

<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>

但是我遇到了一个错误，在取消选中 optionC 后，用户无法再次检查它

Answer 1

您的代码是错误的，因为您还应该引用 checkbox 触发点击事件的数据，我使用 e.target 修复了代码检查谁触发了事件

var optionA = document.getElementById("optionA");
var optionB = document.getElementById("optionB");
var optionC = document.getElementById("optionC");
optionC.checked = true;
[ optionA, optionB, optionC ].forEach(function(option) {
   option.addEventListener("click", function(e) {
      const elem = e.target;
      if(elem == optionB) {
          if(optionC.checked)
            optionA.checked = false;
      }
      if(elem == optionA) {
          if(optionB.checked)
            optionC.checked = false;
      }
      if(elem == optionC) {
          if(optionA.checked)
            optionB.checked = false;
      }
   });
});

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