为什么 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) {

  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>