jQuery 版的 CheckBox 复选框成组联动(性能改进版)

上一个版本的缺点是当组和组成员较多时,性能较差,此版主要是将所有组和组成员缓存,以达到改善性能的目的。


/*

-------------------------
	复选框联动

	www.zhangkai.net
-------------------------

	给复选框添加属性 group="...",则组名相同的复选框会成为一组。
	
	控制组状态的复选框添加属性 forcheckboxgroup="...",就可以控制对应名称的组。
	和组联动的其它元素也可添加属性 forcheckboxgroup="...",当对应的复选框组至少有一个选中时可用,否则不可用。

	例如:
	<label><input type="checkbox" forcheckboxgroup="group_sel"/>全选</label>

	<label><input type="checkbox" group="group_sel"/>选项1</label>
	<label><input type="checkbox" group="group_sel"/>选项2</label>
	...
	<label><input type="checkbox" group="group_sel"/>选项n</label>

	<button type="button" forcheckboxgroup="group_sel">对选中的项目进行操作</button>

*/

$(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 方法不能获得
				_checkedcount = _checkgroups[_groupname].filter("[checked]").length,//所在组处于选中状态的复选框数量
				_blnEqual =  _checkedcount==0 || _checkedcount == _checkgroups[_groupname].length;    //该组所有成员的选中状态是否相同,即全都选中,或全都未选

			//设置所有可控制该组状态的复选框的状态
			_jgroupCons.filter(":checkbox[forcheckboxgroup='" + _groupname + "']").prop("checked", _blnStat).prop("indeterminate", !_blnEqual);

			//设置所有与组关联的非复选框的元素状态
			_jgroupCons.filter("[forcheckboxgroup='" + _groupname + "']:not(:checkbox)").prop("disabled", !(_blnStat || !_blnEqual)).toggleClass("disabled", !(_blnStat || !_blnEqual));
		});
});


  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值