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

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

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

如果要在单击特定标签时将单选按钮显示为选中状态，则需要将该特定输入的hidden属性设置为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)（它只会返回没有被检查的元素），而是做出一个console.log(element.checked)并在控制台中查看是否为true （已选中）或错误（未选中）。

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

3 个答案: