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++) {&nbsp; choices01[k].addEventListener("click", function() {&nbsp; &nbsp; console.log(inputs01[k].checked);&nbsp; &nbsp; inputs01[k].setAttribute('checked', true);&nbsp; &nbsp; console.log(inputs01[k].checked);&nbsp; });}<ul class="nav md-pills pills-default flex-column" role="tablist">&nbsp; <li class="nav-item">&nbsp; &nbsp; <input type="radio" name="q01" value="1" checked hidden>&nbsp; &nbsp; <a class="nav-link choice01 active" data-toggle="tab" href="#answer1-1" role="tab">1</a>&nbsp; </li>&nbsp; <li class="nav-item">&nbsp; &nbsp; <input type="radio" name="q01" value="2" hidden>&nbsp; &nbsp; <a class="nav-link choice01" data-toggle="tab" href="#answer1-2" role="tab">2</a>&nbsp; </li>&nbsp; <li class="nav-item">&nbsp; &nbsp; <input type="radio" name="q01" value="3" hidden>&nbsp; &nbsp; <a class="nav-link choice01" data-toggle="tab" href="#answer1-3" role="tab">3</a>&nbsp; </li>&nbsp; <li class="nav-item">&nbsp; &nbsp; <input type="radio" name="q01" value="4" hidden>&nbsp; &nbsp; <a class="nav-link choice01" data-toggle="tab" href="#answer1-4" role="tab">4</a>&nbsp; </li></ul>

Answer 3

目前还不清楚你想从你的问题中得到什么。您已经为输入设置了隐藏属性，因此它不会显示，但当您单击 a 标签时它确实发生了变化。如果您想在单击特定标签时将单选按钮显示为选中状态，则需要将该特定输入的隐藏属性设置为 false。&nbsp;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++) {&nbsp; &nbsp; choices01[k].addEventListener("click", function(){&nbsp; &nbsp; &nbsp; &nbsp; inputs01[k].checked = true;&nbsp; &nbsp; &nbsp; &nbsp; for (let j=0;j<inputs01.length;j++) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; inputs01[j].hidden = true;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; inputs01[k].hidden = false;&nbsp; &nbsp; });}