jQuery 版的 CheckBox 复选框成组联动（JavaScript）_jquery实现checkbox联动选中-优快云博客

本文链接：https://blog.youkuaiyun.com/Triumph/article/details/2910894

要使多个复选框成组，在写复选框的 HTML 代码时添加自定义属性 group ，如：
<input type="checkbox" group="groupname"/>
<input type="checkbox" group="groupname"/>
...

这样在页面显示时，group 名称相同的会成为一组。同样，在需要联动的对象的代码里添加自定义属性 forcheckboxgroup，名称为联动复选框组的 group 属性的值。当联动对象为复选框时，将控制全组的复选状态，当联动对象为其它元素时，复选框组将控制其 disabled 属性，规则是组内的复选框至少有一个选中时被联动的元素对象的 disabled 属性为 false，否则为 true。如：
<input type="checkbox" forcheckboxgroup="groupname"/>
<input type="button" value="按钮" forcheckboxgroup="groupname"/>
...

$(function(){
//将所有与组关联的非复选框的元素设为无效
$("[forcheckboxgroup]:not(:checkbox)").attr("disabled",true);
$(":checkbox[forcheckboxgroup]") //选择所有可以控制复选框组状态的复选框
.click(function(){ // 绑定 click 事件
//点击此复选框后只做以下三件事：
// 1. 设置所控制的复选框组内所有复选框的状态
$(":checkbox[group='" + this.getAttribute('forcheckboxgroup') + "']").attr("checked",this.checked);
// 2. 设置与自己具有相同功能的复选框的状态
$(":checkbox[forcheckboxgroup='" + this.getAttribute('forcheckboxgroup') + "']").attr("checked",this.checked).attr("indeterminate",false);
// 3. 设置所有与该复选框组相关联的元素的状态
$("[forcheckboxgroup='" + this.getAttribute('forcheckboxgroup') + "']:not(:checkbox)").attr("disabled",!this.checked);
});
$(":checkbox[group]") //选择所有成组的复选框
.click(function(){ //绑定 click 事件
var blnStat = this.checked; //复选框状态
var blnEqual = true; //该组成员状态是否相同
$(":checkbox[group='" + this.getAttribute('group') + "']") //选择该组成员
.each(function(){
blnEqual = blnStat == this.checked;
return blnEqual ; //有不同状态时停止
});
//设置所有与组关联的非复选框的元素状态
$("[forcheckboxgroup='" + this.getAttribute('group') + "']:not(:checkbox)").attr("disabled",!(blnStat||!blnEqual));
//设置所有可控制该组状态的复选框的状态
$(":checkbox[forcheckboxgroup='" + this.getAttribute('group') + "']").attr("checked",blnStat).attr("indeterminate",!blnEqual);
});
});