Question

在编写代码时，我遇到了无法解决自己的问题。好吧，它对我if (checkbox.checked == false)无效，但是if (checkbox.checked == true)有效，即使未选中该复选框也是如此。我在Opera和Edge上检查了它。这是个常见的问题吗？有什么办法可以解决这个问题？

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

Answer 1

您的代码中存在拼写错误：querySelecotr应该为querySelector。您还可以使用getElementById通过其id属性获取元素。

两个版本都可以在我测试过的浏览器（Firefox，Chrome，Safari）中使用。

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

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>

为什么javascript中的e.preventDefault函数不适用于该复选框？

1 个答案: