@{
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>
代碼截圖：
效果截圖：
全選：
全不選：
當為全選狀態時，若有單個不選，全選復選框也要變為未選中狀態：
當一個個選中子復選框，直至把全部都選中時，全選的復選框也要變為選中狀態：
