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个选项之一上单击时，将显示该选项而没有选中，就好像我没有单击过。

NB：inputs01 [k]给我发回了我单击的正确元素...

Answer 1

设置checked属性似乎不起作用，但是setAttribute起作用。单击下面将导致checked属性从false变为true，如您在日志中所见：

Answer 2

不清楚您要从问题中得到什么。您已经为输入设置了hidden属性，因此它不会显示，但是当您单击a标签时它确实发生了变化。