Html5 Checkbox多种状态切换

最新推荐文章于 2024-07-15 02:56:26 发布

jwzhangjie

最新推荐文章于 2024-07-15 02:56:26 发布

阅读量9.2k

点赞数

分类专栏： Html5

本文链接：https://blog.csdn.net/jwzhangjie/article/details/51604900

版权

Html5 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

最近在搞一个权限配置的页面，里面的选项框要实现级联，同时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);

如果修改可以修改checked为true，indeterminate的状态并不会修改checkbox的值。

针对checkbox的多种状态可以查看Indeterminate Checkboxes

jwzhangjie

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Html5 Checkbox多种状态切换

最近在搞一个权限配置的页面，里面的选项框要实现级联，同时checkbox需要有三种状态：选择，部分选择，不选，搜索找到一篇文章jQuery 版的 CheckBox 复选框成组联动（性能改进版）不过我在浏览器上测试有问题，进行修改代码如下：全选选项1 选项2 选项n 对选中的项目进行操作 $("#ww
复制链接

扫一扫

专栏目录