javascript 使用 jQuery 创建“全选”/“全选”复选框？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10425406/
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
Create "check all" / "select all" checkbox with jQuery?
提问by Mr.T.K
I have few checkboxes , out of which one is "Select All" and the others are some standalone's.
我有几个复选框，其中一个是“全选”，其他是一些独立的。
The requirement is that
要求是
- Ifthe user click on "Select All" checkbox, then all other checkboxes will be checked.
- If he unchecks the "Select All" checkbox , then everything will be unchecked.
- And if any one of the individual checkbox is unchecked, then the "Select all" will be unchecked.
- If all the four check boxes are checked, then the "Select All" will be checked.
- 如果用户单击“全选”复选框，则将选中所有其他复选框。
- 如果他取消选中“全选”复选框，则所有内容都将取消选中。
- 如果单个复选框中的任何一个未选中，则“全选”将被取消选中。
- 如果所有四个复选框都被选中，则“全选”将被选中。
I am using JQuery. I am able to achieve the first two but not the last two. My code is as under
我正在使用 JQuery。我能够实现前两个，但不能实现后两个。我的代码如下
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> Check / UnCheck All Checkbox </TITLE>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
function SelectDeselect()
{
if(document.getElementById('chkSelectDeselectAll').checked) $("INPUT[type='checkbox']").attr('checked',true);
else $("INPUT[type='checkbox']").attr('checked',false);
}
</script>
</HEAD>
<BODY>
<input type="checkbox" id="chkSelectDeselectAll" onClick="SelectDeselect()">Select All
<br><br>
Select your hobbies:
<br><br>
<input type="checkbox" id="chkTV">Watching T.V.<br><br>
<input type="checkbox" id="chkGardening">Gardening<br><br>
<input type="checkbox" id="chkSwimming">Swimming<br><br>
<input type="checkbox" id="chkChess">Playing Chess<br><br>
</BODY>
</HTML>
Need help to implement the rest.
需要帮助来实现其余的。
Thanks
谢谢
采纳答案by Mujassir Nasir
function checkOne(){
if( document.getElementById('chkTV').checked &&
document.getElementById('chkGardening').checked &&
document.getElementById('chkSwimming').checked &&
document.getElementById('chkChess').checked ){
document.getElementById('chkSelectDeselectAll').checked = true;
}
else{
document.getElementById('chkSelectDeselectAll').checked = false;
}
}
<input type="checkbox" id="chkTV" onclick="checkOne">Watching T.V.<br><br>
<input type="checkbox" id="chkGardening" onclick="checkOne">Gardening<br><br>
<input type="checkbox" id="chkSwimming" onclick="checkOne">Swimming<br><br>
<input type="checkbox" id="chkChess" onclick="checkOne">Playing Chess<br><br>
回答by Mr.T.K
$(document).ready(function() {
$('#main').change(function() {
if ($(this).is(':checked')) {
$('input[name="hi[]"]:checkbox').attr('checked', true);
} else {
$('input[name="hi[]"]:checkbox').attr('checked', false);
}
});
$('input[name="hi[]"]:checkbox').change(function() {
var chkLength = $('input[name="hi[]"]:checkbox').length;
var checkedLen = $('input[name="hi[]"]:checkbox:checked').length;
if (chkLength == checkedLen) {
$('#main').attr('checked', true);
} else {
$('#main').attr('checked', false);
}
});
});
?
CHeck Fiddle: http://jsfiddle.net/4vKwm/10/
检查小提琴：http: //jsfiddle.net/4vKwm/10/
回答by COLD TOLD
maybe it gives some explanations
也许它给出了一些解释
Ifthe user click on "Select All" checkbox, then all other checkboxes will be checked.
如果用户单击“全选”复选框，则将选中所有其他复选框。
$("#chkSelectDeselectAll").click(function(){
if($("#chkSelectDeselectAll").is(':checked'))
{
("checkbox").each(function(){
$(this).attr('checked', 'checked');
});
}
});
If he unchecks the "Select All" checkbox , then everything will be unchecked.
如果他取消选中“全选”复选框，则所有内容都将取消选中。
$("#chkSelectDeselectAll").click(function(){
if(!$("#chkSelectDeselectAll").is(':checked'))
{
("checkbox").each(function(){
$(this).removeAttr('checked');
});
}
});
And if any one of the individual checkbox is unchecked, then the "Select all" will be unchecked.
如果单个复选框中的任何一个未选中，则“全选”将被取消选中。
$("checkbox").click(function(){
("checkbox").each(function(){
if($(this).is(':checked'))
{
$("#chkSelectDeselectAll").removeAttr('checked');
}
});
});
If all the four check boxes are checked, then the "Select All" will be checked.
如果所有四个复选框都被选中，则“全选”将被选中。
$("checkbox").click(function(){
("checkbox").each(function(){
var yesno=true;
if(!$(this).is(':checked'))
{
yesno=false;
}
});
if( yesno)
{
$("#chkSelectDeselectAll").attr('checked', 'checked')
}
});
回答by rgin
Simply check the state of all checkboxes.
只需检查所有复选框的状态。
Working Demo: http://jsfiddle.net/XSdjQ/1/
工作演示：http: //jsfiddle.net/XSdjQ/1/
Updated Demo: http://jsfiddle.net/XSdjQ/2/
更新演示：http: //jsfiddle.net/XSdjQ/2/
Yet another Demo that works nicely with your markup: http://jsfiddle.net/XSdjQ/3/
另一个可以很好地与您的标记配合使用的演示：http: //jsfiddle.net/XSdjQ/3/
回答by voigtan
I would really recommend you to update your jQuery library and try to add a class to all the checkboxes you want to listen to, but:
我真的建议您更新您的 jQuery 库并尝试将一个类添加到您想要收听的所有复选框中，但是：
var collection = $("input:checkbox:not(#chkSelectDeselectAll)").change(function() {
selectAll[0].checked = collection.filter(":not(:checked)").length === 0;
});
var selectAll = $("#chkSelectDeselectAll").change(function(){
collection.attr('checked', this.checked);
});
will work, I added the feature if you manually check all (or deselect one when you pushed select all) then it will toggle off the #chkSelectDeselectAll. A demo:
会起作用，如果您手动选中所有（或在按下全选时取消选择一个），我添加了该功能，然后它将关闭#chkSelectDeselectAll. 一个演示：
回答by Raj
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$("[id*=chkAll]").bind("click", function () {
if ($(this).is(":checked")) {
$("[id*=chkvalue] input").attr("checked", "checked");
} else {
$("[id*=chkvalue] input").removeAttr("checked");
}
});
$("[id*=chkvalue] input").bind("click", function () {
if ($("[id*=chkvalue] input:checked").length == $("[id*=chkvalue] input").length) {
$("[id*=chkAll]").attr("checked", "checked");
} else {
$("[id*=chkAll]").removeAttr("checked");
}
});
});
</script>
<asp:CheckBox ID="chkAll" Text="Select All Test Patterns" runat="server" />
<asp:CheckBoxList ID="chkvalue" runat="server">
<asp:ListItem Text="On/Off" />
<asp:ListItem Text="Alternate Rows" />
<asp:ListItem Text="Alternate Columns" />
<asp:ListItem Text="Alternate Diagonals" />
<asp:ListItem Text="Running Row" />
<asp:ListItem Text="Running Columns" />
</asp:CheckBoxList>
回答by Chandresh M
You can try this code.
你可以试试这个代码。
$(document).ready(function(){
$('#chkSelectDeselectAll').toggle(function(){
$('input[type=checkbox]').each(function(){
$(this).attr('checked',true);
});
},function(){
$('input[type=checkbox]').each(function(){
$(this).removeAttr('checked');
});
})
});
Thanks.
谢谢。
