三层结构复选框勾选控制
来源：互联网 发布：ip网络功放作用 编辑：程序博客网 时间：2024/06/05 05:53
demo引入jquery版本号为jquery-1.7.1.min.js
<!DOCTYPE HTML><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style type="text/css"> html,body,p,ul,li,h1,h2,h3,h4,img,dl,dt,dd,ol{ padding: 0; margin: 0; border: none; } body{ font-family: Helvetica, Tahoma, Arial, "Microsoft YaHei", "微软雅黑", SimSun, "宋体", Heiti, "黑体", sans-serif; font-size: 12px; color: #333333; } /*checkBox*/ label { display: inline-block; vertical-align: middle; } h1{font-size: 18px;margin-bottom: 10px;} .checkBox{margin: 20px 0 0 50px;} .checkBox .all-top{margin-bottom: 5px;color: #58a200;font-weight: bold;} .checkBox dl{ margin-bottom: 6px; border-bottom: 1px dotted #ccc; margin-left: 20px; } .checkBox dl dt{ font-weight: bold; color:#D58C00; } .checkBox dl dd{ line-height: 14px; padding: 4px 0 4px 16px; } .checkBox dd span{ display: inline-block; *display: inline; width: 200px; zoom:1; font-weight: bold; margin-bottom: 6px; } .checkBox dd label{font-weight: normal;cursor: pointer;} .checkBox dd p label{margin-bottom:2px;} .checkBox input[type="checkbox"]{ margin: -2px 4px 1px 0; vertical-align:middle; } </style></head><body> <div id="Role_menu_c" > <form action="" method="post" > <div class="checkBox"> <h1>内容一</h1> <label class="all-top"><input type="checkbox">全选</label> <dl> <dt> <label><input type="checkbox" />标题1</label> </dt> <dd> <span> <p>属性1</p> <label><input type="checkbox" name="ckRead" />只读</label> <label><input type="checkbox" name="ck" />维护</label> </span> <span> <p>属性2</p> <label><input type="checkbox" name="ckRead" />只读</label> <label><input type="checkbox" name="ck" />维护</label> </span> <span> <p>属性3</p> <label><input type="checkbox" name="ckRead" />只读</label> <label><input type="checkbox" name="ck" />维护</label> </span> <span> <p>属性4</p> <label><input type="checkbox" name="ckRead" />只读</label> <label><input type="checkbox" name="ck" />维护</label> </span> </dd> </dl> <dl> <dt> <label><input type="checkbox" />标题2</label> </dt> <dd> <span> <p>属性1</p> <label><input type="checkbox" name="ckRead" />只读</label> <label><input type="checkbox" name="ck" />维护</label> </span> <span> <p>属性2</p> <label><input type="checkbox" name="ckRead" />只读</label> <label><input type="checkbox" name="ck" />维护</label> </span> <span> <p>属性3</p> <label><input type="checkbox" name="ckRead" />只读</label> <label><input type="checkbox" name="ck" />维护</label> </span> <span> <p>属性4</p> <label><input type="checkbox" name="ckRead" />只读</label> <label><input type="checkbox" name="ck" />维护</label> </span> <span> <p>属性5</p> <label><input type="checkbox" name="ckRead" />只读</label> <label><input type="checkbox" name="ck" />维护</label> </span> <span> <p>属性6</p> <label><input type="checkbox" name="ckRead" />只读</label> <label><input type="checkbox" name="ck" />维护</label> </span> </dd> </dl> <dl> <dt> <label><input type="checkbox" />标题3</label> </dt> <dd> <span> <p>属性1</p> <label><input type="checkbox" name="ckRead" />只读</label> <label><input type="checkbox" name="ck" />维护</label> </span> <span> <p>属性2</p> <label><input type="checkbox" name="ckRead" />只读</label> <label><input type="checkbox" name="ck" />维护</label> </span> <span> <p>属性3</p> <label><input type="checkbox" name="ckRead" />只读</label> <label><input type="checkbox" name="ck" />维护</label> </span> </dd> </dl> <dl> <dt> <label><input type="checkbox" />标题4</label> </dt> <dd> <span> <p>属性1</p> <label><input type="checkbox" name="ckRead" />只读</label> <label><input type="checkbox" name="ck" />维护</label> </span> <span> <p>属性2</p> <label><input type="checkbox" name="ckRead" />只读</label> <label><input type="checkbox" name="ck" />维护</label> </span> </dd> </dl> </div> </form> </div> <div id="Role_message_c" > <form action="" method="post" > <div class="checkBox"> <h1>内容二</h1> <label class="all-top"><input type="checkbox">全选</label> <dl> <dt> <label><input type="checkbox" />level1</label> </dt> <dd> <p> <label><input type="checkbox" name="ck" />content description</label> </p> <p> <label><input type="checkbox" name="ck" />content description content description content description</label> </p> <p> <label><input type="checkbox" name="ck" />content description content description content description content description content description content description</label> </p> <p> <label><input type="checkbox" name="ck" />content description</label> </p> <p> <label><input type="checkbox" name="ck" />content description description description</label> </p> <p> <label><input type="checkbox" name="ck" />content description</label> </p> <p> <label><input type="checkbox" name="ck" />content description description description</label> </p> <p> <label><input type="checkbox" name="ck" />content description</label> </p> <p> <label><input type="checkbox" name="ck" />content description</label> </p> <p> <label><input type="checkbox" name="ck" />content description</label> </p> <p> <label><input type="checkbox" name="ck" />content description description description</label> </p> <p> <label><input type="checkbox" name="ck" />content description</label> </p> <p> <label><input type="checkbox" name="ck" />content description description description</label> </p> <p> <label><input type="checkbox" name="ck" />content description</label> </p> <p> <label><input type="checkbox" name="ck" />content description</label> </p> </dd> </dl> <dl> <dt> <label><input type="checkbox" />leve2</label> </dt> <dd> <p> <label><input type="checkbox" name="ck" />content description</label> </p> <p> <label><input type="checkbox" name="ck" />content description</label> </p> </dd> </dl> <dl> <dt> <label><input type="checkbox" />level3</label> </dt> <dd> <p> <label><input type="checkbox" name="ck" />content description</label> </p> </dd> </dl> <dl> <dt> <label><input type="checkbox" />level4</label> </dt> <dd> <p> <label><input type="checkbox" name="ck" />content description</label> </p> </dd> </dl> </div> </form> </div> <script type="text/javascript" src="http://code.hs-cn.com/jquery/jquery-1.7.1.min.js"></script> <script type="text/javascript"> $(function(){ roleCkAll(); }); function roleCkAll(){ $("dt").find(":checkbox").bind('click',function(event){ //dt中的全选按钮 event.stopPropagation(); var itemChk = $(this).closest("dl").find("dd :checkbox").not(":disabled,:hidden"), itemChkDefault = itemChk.not("[name=ckRead]"); if(this.checked){ itemChk.filter("[name=ckRead]").attr("checked", false); itemChkDefault.attr("checked", this.checked ); }else{ itemChk.attr("checked", this.checked ); } checkTop($(this).closest("dl")); }); $("dd").find(":checkbox").bind('click',function(){ var num = $(this).closest("dd").find("span").eq(0).find("label").length; num = num==0?1:num; $(this).parent().siblings("label").find(":checkbox").attr('checked',false); var $tmp=$(this).closest("dd").find(":checkbox").not(":disabled,:hidden"); var len = $tmp.length/num; var checked = len==$tmp.filter(':checked').not(":disabled,:hidden").length; $(this).closest("dl").find("dt :checkbox").attr('checked',checked); checkTop($(this).closest("dl")); }); $(".checkBox .all-top").find(":checkbox").bind('click',function(event){ //有三层结构时的第一个全选 event.stopPropagation(); var itemChk = $(this).parents(".checkBox").find("dl input:checkbox").not(":disabled,:hidden"), itemChkDefault = itemChk.not("[name=ckRead]"); if(this.checked){ itemChk.filter("[name=ckRead],[name=ck]").attr("checked", false); itemChkDefault.attr("checked", this.checked ); }else{ itemChk.attr("checked", this.checked ); } }); function checkTop(obj){ var checkBox = obj.closest(".checkBox"); var $tmp=checkBox.find("dt :checkbox").not(":disabled,:hidden,[name=ckRead]"); var checked = $tmp.length==$tmp.filter(':checked').not(":disabled,:hidden").length; checkBox.find(".all-top :checkbox").attr('checked',checked); } } </script></body></html> 0 0
- 三层结构复选框勾选控制
- 三层结构
- 三层结构
- 三层结构
- 三层结构
- 三层结构
- 三层结构
- 三层结构
- 三层结构
- 三层结构
- 三层结构
- 三层结构
- 三层结构
- 三层结构
- 三层结构
- 三层结构
- jquery控制复选框
- js控制复选框
- poker 游戏实现 （python）
- 获取季度的第一天和最后一天
- 新手
- Spring学习笔记（一） 通过Spring控制反转（IOC:Inversion of Control）为对象设置属性
- 遍历指定路径下所有文件并转化路径：F:\test\a.jpg --->F:/test/a.jpg
- 三层结构复选框勾选控制
- 二手车交易数据接口调用代码返回示例
- 邮箱输入框测试用例
- gcc 、configure 用法
- androidUI开发中的规范
- C# 操作域用户
- java环境变量的配置
- 贝叶斯MATLAB
- 对象的转型
