JavaScript 检查多个复选框答案

【问题标题】：JavaScript check multiple checkboxJavaScript 检查多个复选框
【发布时间】：2023-03-09 11:03:01
【问题描述】：

        <input type="checkbox" name="name[]" value="A">A</input>
        <input type="checkbox" name="name[]" value="C">C</input>
        <input type="checkbox" name="name[]" value="D">D</input>
        <input type="checkbox" name="name[]" value="E">E</input>

我有值 A 和 C，如何使用 javascript 使 A & C 检查

【问题讨论】：

您应该向我们展示您迄今为止所做的尝试，或者您应该检查该问题的重复项：stackoverflow.com/questions/8206565/… 以找到针对该特定情况的可能解决方案。
另外，请注意 <input> 元素是 void 元素 - 这意味着它们没有结束标记。使用<label> 将文本与输入相关联，您可以通过添加斜杠使元素自动关闭：<input type="checkbox" name="name[]" value="A" />。

标签： javascript checkbox

【解决方案1】：

试试

['A','C'].forEach(v=> document.querySelector(`[value=${v}]`).checked=1)

['A','C'].forEach(v=> document.querySelector(`[value=${v}]`).checked=1)

// and her is longer but theoretically more efficient version:
// document.querySelectorAll(['A','C'].map(v=> `[value=${v}]`)+'').forEach(c=>c.checked=1)

<input type="checkbox" name="name[]" value="A">A</input>
<input type="checkbox" name="name[]" value="C">C</input>
<input type="checkbox" name="name[]" value="D">D</input>
<input type="checkbox" name="name[]" value="E">E</input>

【讨论】：

【解决方案2】：

你可以使用

document.querySelectorAll("input[value=A]")[0].checked = true;
document.querySelectorAll("input[value=C]")[0].checked = true;

【讨论】：

请注意，document.querySelectorAll() 返回一个节点数组，因此您必须通过索引访问它们（例如，result[0]）。这可能是您的回答未被接受的原因。

【解决方案3】：

你必须先给输入框分配一个id，然后你才能使用那个id调用javascript。

  <html>
    <script type="text/javascript">
    function setValue()
    {
       document.getElementById("A").checked = true;
       document.getElementById("C").checked = true;
    }
    </script>
    <body>
       <input id="A" type="checkbox" name="name[]" value="A">A</input>
       <input id="B" type="checkbox" name="name[]" value="C">C</input>
       <input id="C" type="checkbox" name="name[]" value="D">D</input>
       <input id="D" type="checkbox" name="name[]" value="E">E</input>
       <br/><br/>
       <button onClick="setValue()"> Set Value </button>
    </body>
  </html>

【讨论】：

【解决方案4】：

这应该适合你。

var myNodeList = document.querySelectorAll("input[value=A], input[value=C]");
for (i = 0; i <	myNodeList.length; i++) {
   	myNodeList[i].checked = true;
}

<input type="checkbox" name="name[]" value="A">A</input>
<input type="checkbox" name="name[]" value="C">C</input>
<input type="checkbox" name="name[]" value="D">D</input>
<input type="checkbox" name="name[]" value="E">E</input>

【讨论】：

【解决方案5】：

为什么不给复选框一个 id 像：

   <input type="checkbox" name="name[]" value="A" id="checkA">A</input>

然后使用以下javascript：

document.getElementById("checkA").checked = true;

【讨论】：

我不能给每个复选框一个 ID，因为我可能有十个同名的复选框[]