Html5 Checkbox多种状态切换
来源:互联网 发布:洛瑞数据 编辑:程序博客网 时间:2024/06/08 02:33
最近在搞一个权限配置的页面,里面的选项框要实现级联,同时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
0 0
- Html5 Checkbox多种状态切换
- 修复checkbox的状态切换和动态取值的问题,主要是学会jquery选择或者不选中checkbox
- 有趣的checkbox动画切换状态(支付宝转账成功显示)--第三方开源--AnimCheckBox
- bitset存储多种状态
- HTML5中的checkbox
- checkbox点击切换图片
- Android CheckBox点击切换
- Android CheckBox 点击切换
- checkbox状态变化
- GridView记住CheckBox状态
- 判断checkbox选中状态
- CheckBox状态选择器?
- checkbox状态改变事件
- RecyclerView-点击切换多种布局
- 【checkbox】判断checkbox的选中状态
- checkbox实现全选的多种方法
- checkbox实现全选的多种方法
- checkbox实现全选的多种方法
- 自动化发布-GitLab WEB Hooks 配置
- iOS10个实用小技巧(总有你不知道的和你会用到的)
- JAVA中的文件删除
- Android中级教程之----Log图文详解
- jquery为多个元素添加事件
- Html5 Checkbox多种状态切换
- poj 3253 Fence Repair
- Android事件分发机制完全解析(终极版二)
- 三栏网页布局
- QList类、QLinkedList类和QVector类
- opencv中的Kmeans使用示例
- Example 2 : Multi Sampling And Filtering Methods
- 设计模式笔记-Interpreter解释器模式
- 算法排序之冒泡排序与插入排序