twitter-bootstrap Javascript检查具有相同ID的所有复选框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32077345/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Javascript check all checkboxes with same ID
提问by mmarcc
I have the following
我有以下
<form class="form-inline" role="form">
<div class="col-xs-3">
<div class="pic-container">
<label>
<span><input type="checkbox" name="discounting" onchange='handleChange(this);' id='check11' value="">ciao</span><br>
</label>
</div>
</div>
<div class="col-xs-3">
<div class="pic-container">
<label>
<span><input type="checkbox" name="discounting" onchange='handleChange(this);' id='check21' value="">hola</span><br>
</label>
<label>
<span><input type="checkbox" name="discounting" onchange='handleChange(this);' id='check21' value="">hola</span><br>
</label>
<label>
<span><input type="checkbox" name="discounting" onchange='handleChange(this);' id='check21' value="">hola</span><br>
</label>
<label>
<span><input type="checkbox" name="discounting" onchange='handleChange(this);' id='check21' value="">hola</span><br>
</label>
<label>
<span><input type="checkbox" name="discounting" onchange='handleChange(this);' id='check21' value="">hola</span><br>
</label>
<label>
<span><input type="checkbox" name="discounting" onchange='handleChange(this);' id='check21' value="">hola</span><br>
</label>
</div>
</div>
</form>
Id like by clicking the first check box that all check boxes in the second div with an ID of "check21" to be chacked automatically.
我想通过单击第一个复选框来自动检查第二个 div 中 ID 为“check21”的所有复选框。
<script>
function handleChange(cb) {
if(cb.checked == true) {
document.getElementById("check21").checked = true;
alert('eyaicecold');
} else {
alert('Message 2');
var x = document.getElementById("check21").disabled= false;
}
}
</script>
I have used the following script which works but only for the first one. I wan to use the ids since the name and the value will be used to send the sql request trough the form.
我使用了以下脚本，但仅适用于第一个脚本。我想使用 ID，因为名称和值将用于通过表单发送 sql 请求。
回答by j08691
As has been pointed out in the comments, IDs mustbe unique, so you can change them to classes if you like. Then you can use this jQuery:
正如评论中所指出的，ID必须是唯一的，因此您可以根据需要将它们更改为类。然后你可以使用这个jQuery：
$('input.check11').click(function(){
$('input.check21').prop('checked',this.checked)
})
Also, remove those inline event handlers.
此外，删除那些内联事件处理程序。
回答by Ahs N
As said before, each element on a webpage should have a unique ID.
如前所述，网页上的每个元素都应该有一个唯一的 ID。
However, it can still be done using querySelectorAlllike so:
但是，它仍然可以使用querySelectorAll来完成，如下所示：
function handleChange(cb) {
var allCB = document.querySelectorAll("input[id='check21']");
for(var i=0; i< allCB.length; i++){
allCB[i].checked=true;
}
}
回答by Domino
The idea behind IDs is that they are unique. It's what allows you to get a single element with the getElementByIdfunction, while other getElementsByXXXfunctions return a list of elements (hence the s in getElements).
ID 背后的理念是它们是独一无二的。它允许您使用getElementById函数获取单个元素，而其他getElementsByXXX函数返回元素列表（因此是 getElement s 中的 s）。
When you retrieve the POST data (through PHP or another server language), you will need to check if the variable called like the name attribute is set. If it is, then the checkbox was checked. Having multiple checkboxes with the same name like you did won't work. This other SO answerexplains how to use POST data from checkboxes very well.
当您检索 POST 数据（通过 PHP 或其他服务器语言）时，您需要检查是否设置了像 name 属性一样调用的变量。如果是，则复选框被选中。像您一样拥有多个同名的复选框是行不通的。另一个 SO 答案解释了如何很好地使用复选框中的 POST 数据。
If you choose to go with name="something[]"notation, when you could check all boxes of the second div with:
如果您选择使用name="something[]"符号，则何时可以使用以下命令检查第二个 div 的所有框：
var checkboxes = myDiv.getElementsByName("something[]");
for(var i=0; i < checkboxes.length; ++i) {
checkboxes[i].checked = true;
}
You could also use classes, but I think that would just bloat the code while you already need to use names for forms anyway.
您也可以使用类，但我认为这只会使代码膨胀，而无论如何您已经需要为表单使用名称。
