最近在搞一個權限配置的頁面，裏面的選項框要實現級聯，同時checkbox需要有三種狀態：選擇，部分選擇，不選，搜索找到一篇文章jQuery 版的 CheckBox 複選框成組聯動（性能改進版）不過我在瀏覽器上測試有問題，進行修改代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<div class="container">
<input type="checkbox" forcheckboxgroup="group_sel"/>全選
<input type="checkbox" group="group_sel"/>選項1
<input type="checkbox" group="group_sel"/>選項2
<input type="checkbox" group="group_sel"/>選項n
<button type="button" forcheckboxgroup="group_sel">對選中的項目進行操作</button>
</div>
<script type="text/javascript">
$("#ww").prop("indeterminate", true);
$(function () {
var _jgroupCons = $("[forcheckboxgroup]"), //所有具有 forcheckboxgroup 屬性的元素
_jcheckboxs = $(":checkbox[group]"), //所有具有 group 屬性的複選框
_checkgroups = new Array; //複選框組數組，該數組每一項保存一組由 _jcheckboxs 過濾的複選框組，組名稱即是數組項的鍵
_jcheckboxs.each(function (i) {
var _groupname = $(this).attr("group"); //group 是非標準屬性，必須由 attr 方法獲得值，prop 方法不能獲得
if (!_checkgroups[_groupname]) {
_checkgroups[_groupname] = _jcheckboxs.filter("[group='" + _groupname + "']");
}
});
//將所有與組關聯的非複選框的元素設爲無效
_jgroupCons.filter(":not(:checkbox)").prop("disabled", true).addClass("disabled");
_jgroupCons.filter(":checkbox") //選擇所有可以控制複選框組狀態的複選框
.change(function () { // 綁定 change 事件
var _jthis = $(this),
forgroupname = _jthis.attr("forcheckboxgroup"); //forcheckboxgroup 是非標準屬性，必須由 attr 方法獲得值，prop 方法不能獲得
//點擊此複選框後只做以下三件事：
// 1. 設置所控制的複選框組內所有複選框的狀態
_jcheckboxs.filter("[group='" + forgroupname + "']").prop("checked", this.checked);
// 2. 設置與自己具有相同功能的複選框的狀態
_jgroupCons.filter(":checkbox[forcheckboxgroup='" + forgroupname + "']").prop("checked", this.checked).prop("indeterminate", false);
// 3. 設置所有與該複選框組相關聯的元素的狀態
_jgroupCons.filter("[forcheckboxgroup='" + forgroupname + "']:not(:checkbox)").prop("disabled", !this.checked).toggleClass("disabled", !this.checked);
});
_jcheckboxs //選擇所有成組的複選框
.change(function () { //綁定 change 事件
var _jthis = $(this),
_blnStat = this.checked, //此複選框的選中狀態
_groupname = _jthis.attr("group"), //此複選框所屬的組名稱，非標準屬性，必須由 attr 方法獲得值，prop 方法不能獲得
_group = _checkgroups[_groupname],
_checkedcount = _group.filter(function(index){
return _group[index].checked;
}).length,//所在組處於選中狀態的複選框數量
_blnEqual = _checkedcount == 0 || _checkedcount == _group.length; //該組所有成員的選中狀態是否相同，即全都選中，或全都未選
if (_blnEqual) {
//設置所有可控制該組狀態的複選框的狀態
_jgroupCons.filter(":checkbox[forcheckboxgroup='" + _groupname + "']").prop("checked", _blnStat).prop("indeterminate", !_blnEqual);
}else{
_jgroupCons.filter(":checkbox[forcheckboxgroup='" + _groupname + "']").prop("checked", false).prop("indeterminate", true);
}
//設置所有與組關聯的非複選框的元素狀態
_jgroupCons.filter("[forcheckboxgroup='" + _groupname + "']:not(:checkbox)").prop("disabled", !(_blnStat || !_blnEqual)).toggleClass("disabled", !(_blnStat || !_blnEqual));
});
});
</script>
</body>
</html>
修改部分如上圖的選中內容。
效果圖如下：
對於中間狀態我點擊設置爲全選，如果想修改可以修改
_jgroupCons.filter(":checkbox[forcheckboxgroup='" + _groupname + "']").prop("checked", false).prop("indeterminate", true); 針對checkbox的多種狀態可以查看Indeterminate Checkboxes