为什么javascript中的e.preventDefault函数不适用于复选框？ [关闭]

Question

在编写代码时，我遇到了我自己无法解决的问题。好吧，它对我不起作用if (checkbox.checked == false)，但if (checkbox.checked == true) 起作用，即使未选中复选框。 我在 Opera 和 Edge 上查看过。这是个常见的问题吗？有没有办法解决这个问题？

JSFiddle：[https://jsfiddle.net/mk5j6170/)

Answer 1

您的代码中有拼写错误：querySelecotr 应该是 querySelector。 您还可以使用 getElementById 通过其 id-property 获取元素。

这两个版本都可以在我测试过的浏览器中运行（Firefox、Chrome、Safari）。

如果您使用preventDefault()，检查状态将在事件处理程序完成后恢复。因此，该事件处理程序内部的任何更改都将被还原。一种解决方法是在 setTimeout-call 中切换状态（参见下面的 checkbox3-example）。

let idCheckbox = document.getElementById("checkbox");
idCheckbox.addEventListener("click", function(e) {
  e.preventDefault();
});


let idCheckbox2 = document.querySelector("#checkbox2");
idCheckbox2.addEventListener("click", function (e) {
  e.preventDefault();
});

let idCheckbox3 = document.querySelector("#checkbox3");
idCheckbox3.addEventListener("click", function (e) {
  e.preventDefault();
  setTimeout(() => {
    if (idCheckbox3.checked == false) {
      idCheckbox3.checked = true;
    } else {
      idCheckbox3.checked = false;
    }
  }, 50);
});

<input id="checkbox" name="checkbox" type="checkbox"/>
<label class="sub-label" for="checkbox">Accept checkbox 1</label>
<br>
<input id="checkbox2" name="checkbox2" type="checkbox"/>
<label class="sub-label" for="checkbox2">Accept checkbox 2</label>
<br>
<input id="checkbox3" name="checkbox3" type="checkbox"/>
<label class="sub-label" for="checkbox3">Accept checkbox 3</label>
<br>