Javascript 根据 id 检查/取消选中复选框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17915065/
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 / uncheck checkboxes based on id
提问by Kishore
I have many server input checkboxes. I have given the first checkbox the id all. By default it will be checked. When the user checks other checkboxes, then checkbox with id allwill be unchecked. And if allis checked other checkboxes will be unchecked. For this to happen i made the code but nothing is happening.
我有很多服务器输入复选框。我给了第一个复选框 id all。默认情况下，它将被选中。当用户选中其他复选框时，带有 id 的复选框all将被取消选中。如果all被选中，其他复选框将被取消选中。为此，我编写了代码，但没有发生任何事情。
Here is what i have tried.
这是我尝试过的。
<form>
<input type="checkbox" id="all" value="all" name="all" onChange="check()" checked/>ALL <br/>
<input type="checkbox" id="servers" value="xampp" name="server[]" onChange="check()" />XAMPP <br/>
<input type="checkbox" id="servers" value="wamp" name="server[]" onChange="check()" />WAMP <br/>
<input type="checkbox" id="servers" value="mamp" name="server[]" onChange="check()" />MAMP <br/>
<input type="checkbox" id="servers" value="amp" name="server[]" onChange="check()" />AMP <br/>
</form>
function check(){
var all = document.getElementById("all"),
group = document.getElementById("servers");
if(all.checked == true){
group.checked == false;
}elseif(group.checked == true){
all.checked == false;
}
}
I wanted my code to work like THIS.
我希望我的代码，像工作本。
I dont want to use jQuery for some reasons. So i need my code to be in pure JS.
由于某些原因，我不想使用 jQuery。所以我需要我的代码是纯 JS。
Any help will be appreciated.
任何帮助将不胜感激。
回答by Samer
You can't use the same ID on multiple elements.
您不能在多个元素上使用相同的 ID。
Try this, notice how I placed the checkboxes in a div
试试这个，注意我是如何将复选框放在 div
Here it is working: http://jsfiddle.net/Sa2d3/
它正在工作：http: //jsfiddle.net/Sa2d3/
HTML:
HTML：
<form>
<div id="checkboxes">
<input type="checkbox" id="all" value="all" name="all" onChange="check()" />ALL <br/>
<input type="checkbox" value="xampp" name="server[]" onChange="check()" />XAMPP <br/>
<input type="checkbox" value="wamp" name="server[]" onChange="check()" />WAMP <br/>
<input type="checkbox" value="mamp" name="server[]" onChange="check()" />MAMP <br/>
<input type="checkbox" value="amp" name="server[]" onChange="check()" />AMP <br/>
</div>
</form>
JavaScript:
JavaScript：
document.getElementById('checkboxes').addEventListener('change', function(e) {
var el = e.target;
var inputs = document.getElementById('checkboxes').getElementsByTagName('input');
// If 'all' was clicked
if (el.id === 'all') {
// loop through all the inputs, skipping the first one
for (var i = 1, input; input = inputs[i++]; ) {
// Set each input's value to 'all'.
input.checked = el.checked;
}
}
// We need to check if all checkboxes have been checked
else {
var numChecked = 0;
for (var i = 1, input; input = inputs[i++]; ) {
if (input.checked) {
numChecked++;
}
}
// If all checkboxes have been checked, then check 'all' as well
inputs[0].checked = numChecked === inputs.length - 1;
}
}, false);
EDIT:
编辑：
Based on your request in the comment here is the updated javascript: http://jsfiddle.net/T5Pm7/
根据您在评论中的请求，这里是更新的 javascript：http: //jsfiddle.net/T5Pm7/
document.getElementById('checkboxes').addEventListener('change', function(e) {
var el = e.target;
var inputs = document.getElementById('checkboxes').getElementsByTagName('input');
// If 'all' was clicked
if (el.id === 'all') {
// If 'all' is checked
if (el.checked) {
// Loop through the other inputs and removed the check
for (var i = 1, input; input = inputs[i++]; ) {
input.checked = false;
}
}
}
// If another has been clicked, remove the check from 'all'
else {
inputs[0].checked = false;
}
}, false);
回答by Devin Stewart
You can only assign the same id to one element. What you want to do is give them a class="servers"and then use document.getElementsByClassName("servers");in your JavaScript.
您只能为一个元素分配相同的 id。你想要做的是给他们一个class="servers"，然后document.getElementsByClassName("servers");在你的 JavaScript 中使用。
回答by mohkhan
You cannot have same id for multiple HTML elements. You could do something like this to achieve what you are asking for.
多个 HTML 元素不能具有相同的 id。你可以做这样的事情来实现你的要求。
<form>
<input type="checkbox" id="all" value="all" name="all" onChange="check(this, 'a')" checked/>ALL <br/>
<input type="checkbox" id="servers1" value="xampp" name="server[]" onChange="check(this, 's')" />XAMPP <br/>
<input type="checkbox" id="servers2" value="wamp" name="server[]" onChange="check(this, 's')" />WAMP <br/>
<input type="checkbox" id="servers3" value="mamp" name="server[]" onChange="check(this, 's')" />MAMP <br/>
<input type="checkbox" id="servers4" value="amp" name="server[]" onChange="check(this, 's')" />AMP <br/>
</form>
<script>
function check(cb, type){
var all = document.getElementById("all");
if (type == "a" && cb.checked){
var els = document.getElementsByName("server[]");
for(var i = 0; i < els.length; ++i)
els[i].checked = false;
} else if( type == "s" && cb.checked) {
all.checked = false;
}
}
</script>
回答by KHALID
put this function
把这个功能
function jvcheck(id,Vale){
Checkboxesclass = '.group'+id;
$(Checkboxesclass).each(function() {
this.checked = Vale;
});
}
and then put this code in your main checkbox
然后将此代码放在您的主复选框中
jvcheck('group222',this.checked);
all checkbox with class group222 now checked .
现在选中了类 group222 的所有复选框。
