JS: Установка отмечена на true не работает

Question

Пытаясь установить флажок через addEventListener в JS, я уже пытался с помощью

element.checked = true;
element.setAttribute('checked', true);
element.setAttribute('checked', "checked");

. В консоли я вижу, что для моего флажка установлено значение true (не уверен, чтопроблема заключается в том, что логическое значение отображается в виде строки "true" или это просто представление chrome), но элемент не получает отметку.

input id = "element" class = "element "name =" element "type =" checkbox "value =" 1 "checked =" true "

При загрузке флажок по умолчанию установлен правильно, но когда я пытаюсь снять флажок и установитьновый ничего не происходит (визуально).

Спасибо за любую помощь.

Answer 1

Так что дело в том, что если бы вы должны были сделать это вручную, ваш код был бы следующим:

<input id="element" checked>

Чтобы добиться того же, используя javascript. Это произойдет, только если вы установите проверенное значение в пустую строку. Как это:

element.setAttribute("checked","");

Это позволит вашему выводу быть таким же, как указано выше. НАДЕЖДА, РАБОТАЮЩАЯ ДЛЯ ВАС:)

Answer 2

Я не совсем уверен, что вы пытаетесь сделать, но я думаю, что вы хотите установить один флажок в зависимости от состояния другого.

Посмотрите на это:

/* get the checkboxes */
const checker1 = document.getElementById('checker');
const checker2 = document.getElementById('checker2');

/* now listen for change on checker1 and action */
/* change the selected state of checker two to be opposite of checker 1 */
checker1.addEventListener('change', () => checker2.checked = !checker1.checked);

<p>
  <label for=checker>Click me to toggle the other</label>
  <input type=checkbox id=checker>
</p>

<p>
  <label>I will be toggled</label>
  <input type=checkbox id=checker2 checked>
</p>