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-tags中，而不是在它之外。

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

Answer 2

你不应该像你一样使用td，否则你将无法用js获取文本内容，这就是类似的解决方案。

var inputs=document.getElementsByTagName('input'),
    names=document.getElementsByTagName('label'),
    textNames=[];
for(var i in names){
  textNames.push(names[i].innerHTML);
}
for(var i in inputs){
  var name=textNames[i];
  if(name==='ProdB'){
    inputs[i].checked = true;
  }
}

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

Answer 3

首先，您必须为每个复选框使用唯一ID。

<script type="text/javascript">

    $(document).ready(function () {
           document.getElementById("active2").checked = "checked";
           document.getElementById("active3").checked = "checked";
           document.getElementById("active4").checked = "checked";
           document.getElementById("active7").checked = "checked";
           document.getElementById("active8").checked = "checked";
    });

</script>

<input type=checkbox id="active1" name="checkbox" value="5174234" />
ProdA<br />
<input type=checkbox id="active2" name="checkbox" value="2171123" />
ProdB<br />
<input type=checkbox id="active3" name="checkbox" value="1174228" />
ProdB<br />
<input type=checkbox id="active4" name="checkbox" value="6178232" />
ProdB<br />
<input type=checkbox id="active5" name="checkbox" value="6171239" />
ProdC<br />
<input type=checkbox id="active6" name="checkbox" value="9178630" />
ProdC<br />
<input type=checkbox id="active7" name="checkbox" value="8894221" />
ProdB<br />
<input type=checkbox id="active8" name="checkbox" value="5478234" />
ProdB<br />

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

3 个答案: