我有几个复选框，其中一个是“全选”，其他的是一些独立的。
要求是
- 如果用户单击“全选”复选框，则将选中所有其他复选框。
- 如果他取消选中“全选”复选框，那么所有内容都将取消选中。
- 如果取消选中任何一个复选框，则“全选”也将取消选中。
- 如果四个复选框都被选中，则“全选”将被选中。
我正在使用 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>
需要帮助来实现其余部分。
谢谢
最佳答案
$(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);
}
});
});
检查 fiddle :http://jsfiddle.net/4vKwm/10/
关于javascript - 使用 jQuery 创建 "check all"/"select all"复选框？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10425406/