为什么 javascript 中的 e.preventDefault 函数对复选框不起作用？

Question

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

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

Answer 1

您的代码中有拼写错误：querySelecotr应该是querySelector. 您还可以使用getElementByIdid-property 来获取元素。这两个版本都适用于我测试过的浏览器（Firefox、Chrome、Safari）。如果使用preventDefault()，则在事件处理程序完成后将恢复选中状态。因此，该事件处理程序内部的任何更改都将被还原。一种解决方法是在setTimeout-call内部切换状态（请参阅下面的 checkbox3-example）。let idCheckbox = document.getElementById("checkbox");idCheckbox.addEventListener("click", function(e) {&nbsp; e.preventDefault();});let idCheckbox2 = document.querySelector("#checkbox2");idCheckbox2.addEventListener("click", function (e) {&nbsp; e.preventDefault();});let idCheckbox3 = document.querySelector("#checkbox3");idCheckbox3.addEventListener("click", function (e) {&nbsp; e.preventDefault();&nbsp; setTimeout(() => {&nbsp; &nbsp; if (idCheckbox3.checked == false) {&nbsp; &nbsp; &nbsp; idCheckbox3.checked = true;&nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; idCheckbox3.checked = false;&nbsp; &nbsp; }&nbsp; }, 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>