javascript - 如何使用JS检查一些复选框？

Question

页面有很多复选框，如何使用JS仅选中productB复选框？

<td><input type=checkbox id="active" name="checkbox" value="5174234"></td>
<td>ProdA</td>
<td><input type=checkbox id="active" name="checkbox" value="2171123"></td>
<td>ProdB</td>
<td><input type=checkbox id="active" name="checkbox" value="1174228"></td>
<td>ProdB</td>
<td><input type=checkbox id="active" name="checkbox" value="6178232"></td>
<td>ProdB</td>
<td><input type=checkbox id="active" name="checkbox" value="6171239"></td>
<td>ProdC</td>
<td><input type=checkbox id="active" name="checkbox" value="9178630"></td>
<td>ProdC</td>
<td><input type=checkbox id="active" name="checkbox" value="8894221"></td>
<td>ProdB</td>
<td><input type=checkbox id="active" name="checkbox" value="5478234"></td>
<td>ProdB</td>
...

Answer 1

您的代码内部存在一些问题。

首先您的标签应包含在 td 标签内部，而不是外部。

<td> 
    ProdA
    <input type="checkbox" id="active" name="checkbox" value="5174234">
</td>
<td>
    ProdB
    <input type="checkbox" id="active" name="checkbox" value="2171123">
</td>

...

是一个更好的结构。

第二，您有重复的 ID，这也是不允许的。让它们独一无二。

<td> 
    ProdA
    <input type="checkbox" id="checkbox-a" name="checkbox" value="5174234">
</td>
<td>
    ProdB
    <input type="checkbox" id="checkbox-b" name="checkbox" value="2171123">
</td>

...

第三，现在有了唯一的 id，您可以使用 id 轻松找到 javascript 中的元素。您可以使用getElementById()为此，例如:

document.getElementById("checkbox-b").checked = true;