Почему функция e.preventDefault в javascript не работает для флажка?

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 -call (см. Флажок3-пример ниже) .

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>