Javascript (Vanilla) 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;    });}我有几个问题，每个问题都有一个“a”元素和“choice[numberOfTheQuestion]”类。对于它们中的每一个，我都有一个隐藏的无线电输入，当我单击元素“a”时我想检查它。但是，当我在 for 中执行 console.log(inputs01[k]) 并单击 4 个选项之一时，该选项将显示为没有选中，就好像我没有单击一样。注意：inputs01[k] 向我发送回我单击的正确元素...

Answer 1

element.checked = true;有效，它只是不修改 html。

要验证某个元素是否经过良好检查，您不应该这样做console.log(element)（这只会返回没有检查的元素），而应该创建 aconsole.log(element.checked)并在控制台中查看是否有 true（已检查）或 false（未检查）。

Answer 2

设置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>

Answer 3

目前还不清楚你想从你的问题中得到什么。您已经为输入设置了隐藏属性，因此它不会显示，但当您单击 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;

    });

}