Javascript (ваниль) element.checked = true / false не работает

Question

Мой HTML код:

<ul class="nav md-pills pills-default flex-column" role="tablist">
    <li class="nav-item">
        <input type="radio" name="q01" value="1" hidden checked>
        <a class="nav-link choice01 active" data-toggle="tab" href="#answer1-1" role="tab">1</a>
    </li>
    <li class="nav-item">
        <input type="radio" name="q01" value="2" hidden>
        <a class="nav-link choice01" data-toggle="tab" href="#answer1-2" role="tab">2</a>
    </li>
    <li class="nav-item">
        <input type="radio" name="q01" value="3" hidden>
        <a class="nav-link choice01" data-toggle="tab" href="#answer1-3" role="tab">3</a>
    </li>
    <li class="nav-item">
        <input type="radio" name="q01" value="4" hidden>
        <a class="nav-link choice01" data-toggle="tab" href="#answer1-4" role="tab">4</a>
    </li>
</ul>

Мой JS код:

const choices01 = document.getElementsByClassName("choice01");
const inputs01 = document.querySelectorAll("input[name=q01]");

for (let k=0; k<choices01.length; k++) {
    choices01[k].addEventListener("click", function(){
        inputs01[k].checked = true;
    });
}

У меня есть несколько вопросов, у каждого из которых есть элемент «а» и «выбор» [ numberOfTheQuestion] "класс. Для каждого из них у меня есть скрытый радиовход, который я хотел бы проверить, когда нажимаю на элемент «a».

Однако, когда я делаю console.log (input01 [k]) в for и что я нажимаю затем на один из 4 вариантов, этот отображается без отмеченного, как если бы я не нажал.

Примечание: input01 [k] возвращает мне правильный элемент, на котором я щелкнул .. .

Answer 1

Неясно, что вы хотите от вашего вопроса. Вы установили скрытое свойство для входных данных, поэтому оно не будет отображаться, но оно изменилось, когда вы щелкнули теги a.

Если вы хотите, чтобы переключатель показывался как отмеченный, когда определенный тег является щелкнув, вам нужно установить для скрытого свойства этого конкретного входа значение false. https://jsfiddle.net/y718p9k3/3/

const choices01 = document.getElementsByClassName("choice01");
const inputs01 = document.querySelectorAll("input[name=q01]");

for (let k=0; k<choices01.length; k++) {
    choices01[k].addEventListener("click", function(){
        inputs01[k].checked = true;
        for (let j=0;j<inputs01.length;j++) {
            inputs01[j].hidden = true;
        }
        inputs01[k].hidden = false;
    });
}

Answer 2

element.checked = true; работает, просто не изменяет html.

Чтобы убедиться, что элемент хорошо проверен, вы не должны делать console.log(element) (который просто вернет элемент без проверенного элемента ) а вместо этого сделайте console.log(element.checked) и посмотрите в консоли, если у нас есть true (проверено) или false (не проверено).

---

Answer 3

Установка свойства checked не работает, но setAttribute работает. Если щелкнуть ниже, свойство checked перейдет с false на true, как вы можете видеть в журналах:

const choices01 = document.getElementsByClassName("choice01");
const inputs01 = document.querySelectorAll("input[name=q01]");

for (let k = 0; k < choices01.length; k++) {
  choices01[k].addEventListener("click", function() {
    console.log(inputs01[k].checked);
    inputs01[k].setAttribute('checked', true);
    console.log(inputs01[k].checked);
  });
}

<ul class="nav md-pills pills-default flex-column" role="tablist">
  <li class="nav-item">
    <input type="radio" name="q01" value="1" checked hidden>
    <a class="nav-link choice01 active" data-toggle="tab" href="#answer1-1" role="tab">1</a>
  </li>
  <li class="nav-item">
    <input type="radio" name="q01" value="2" hidden>
    <a class="nav-link choice01" data-toggle="tab" href="#answer1-2" role="tab">2</a>
  </li>
  <li class="nav-item">
    <input type="radio" name="q01" value="3" hidden>
    <a class="nav-link choice01" data-toggle="tab" href="#answer1-3" role="tab">3</a>
  </li>
  <li class="nav-item">
    <input type="radio" name="q01" value="4" hidden>
    <a class="nav-link choice01" data-toggle="tab" href="#answer1-4" role="tab">4</a>
  </li>
</ul>