@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>CheckBoxSelect</title>
</head>
<body>
<div>
<table>
<tr style="text-align:center">
<td colspan="10">全选：<input type="checkbox" name="SelectAll" id="cb_select_all" style="width:50px;height:50px" /></td>
</tr>
<tr>
<td>1：<input type="checkbox" name="cbCheckBox" style="width:50px;height:50px" id="cb_1" onclick="SingleSelect('1')" /></td>
<td>2：<input type="checkbox" name="cbCheckBox" style="width:50px;height:50px" id="cb_2" onclick="SingleSelect('2')" /></td>
<td>3：<input type="checkbox" name="cbCheckBox" style="width:50px;height:50px" id="cb_3" onclick="SingleSelect('3')" /></td>
<td>4：<input type="checkbox" name="cbCheckBox" style="width:50px;height:50px" id="cb_4" onclick="SingleSelect('4')" /></td>
<td>5：<input type="checkbox" name="cbCheckBox" style="width:50px;height:50px" id="cb_5" onclick="SingleSelect('5')" /></td>
<td>6：<input type="checkbox" name="cbCheckBox" style="width:50px;height:50px" id="cb_6" onclick="SingleSelect('6')" /></td>
<td>7：<input type="checkbox" name="cbCheckBox" style="width:50px;height:50px" id="cb_7" onclick="SingleSelect('7')" /></td>
<td>8：<input type="checkbox" name="cbCheckBox" style="width:50px;height:50px" id="cb_8" onclick="SingleSelect('8')" /></td>
<td>9：<input type="checkbox" name="cbCheckBox" style="width:50px;height:50px" id="cb_9" onclick="SingleSelect('9')" /></td>
<td>10：<input type="checkbox" name="cbCheckBox" style="width:50px;height:50px" id="cb_10" onclick="SingleSelect('10')" /></td>
</tr>
</table>
</div>
</body>
</html>
<script src="~/Scripts/jquery-2.1.1.min.js"></script>
<script>
$(function () {
$('#cb_select_all').click(function () {
if ($('input[name="SelectAll"]').is(':checked')) {
$('input[name="cbCheckBox"]').prop('checked', true);//全选
}
else {
$('input[name="cbCheckBox"]').prop('checked', false);//取消全选
}
});
});
//点击单个复选框时，全选的复选框要发生相应的变化
function SingleSelect(id) {
if ($('#cb_' + id).is(':checked') == false) {
$('#cb_select_all').prop('checked', false);//如果全部选中的子复选框有一个没选中了，则将全选复选框的状态变为未选中
}
else {
var checkboxLength = $('input[name="cbCheckBox"]').length;//全部子复选框的个数
var checkedBoxLength = $('input[name="cbCheckBox"]:checked').length;//子复选框选中的个数
if (checkboxLength == checkedBoxLength) {
//点击多个子复选框，当选中的复选框个数等于所有子复选框的个数，则要将全选复选框的转态变为选中
$('#cb_select_all').prop('checked', true);
}
}
/*-------------注意-------------*/
/*
做这个时，一开始死活弄不出来，各种不满意，弄好久了，经过多方排查和找资料，终于解决了问题，总结了下，问题出现在两点：
1、传入的参数id要这种形式：$('#cb_' + id)，我一开始传入的参数是这个CheckBox的id，然后是：$(id).is(':checked'),
看上去没错，但实际是该判断永远返回false，浪费了不少时间
2、问题出现在这里：$('#cb_select_all').attr('checked', false);但结果是该checkbox的状态始终是false,不管怎么弄都不行，
我记得以前是可以这样的，不知道是不是因为新版jQuery的原因.后面百度看到有用prop这个属性，我就试了一下，完美解决问题！
这段代码比我以前写的简洁多了（感悟的废话倒是多了点，哈哈），以后看下能不能提炼出更简洁的，若有人能写出更简洁的，希望不吝赐教啊！
*/
/*-------------获取选中值-------------*/
//$('input[name="cbCheckBox"]:checked').each(function(){
// var checkedVal=$(this).val();
//});
}
</script>
代码截图：
效果截图：
全选：
全不选：
当为全选状态时，若有单个不选，全选复选框也要变为未选中状态：
当一个个选中子复选框，直至把全部都选中时，全选的复选框也要变为选中状态：
