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;
    });
}

我有几个问题，每个问题都有一个 "a" 元素和 "choice[numberOfTheQuestion]" class。对于它们中的每一个，我都有一个隐藏的无线电输入，我想在单击元素 "a".

时检查它

但是，当我在 for 中执行 console.log(inputs01[k]) 然后单击 4 个选项之一时，这个选项显示时没有选中，就好像我没有单击一样。

注意：inputs01[k] 发回我点击的正确元素...

Answer 1

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

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

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

为了验证一个元素是否被正确检查，你不应该做 console.log(element)（这只会 return 没有被检查的元素）而是做一个 console.log(element.checked) 并查看控制台，如果我们有 true（选中）或 false（未选中）。

Javascript（原版）element.checked = true/false 不起作用

Javascript (Vanilla) element.checked = true/false does not work

html

javascript

radio-button

checked