三层结构复选框勾选控制

最新推荐文章于 2024-03-05 00:01:32 发布
原创 最新推荐文章于 2024-03-05 00:01:32 发布 · 707 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#复选框勾选控制

本文介绍如何利用jQuery-1.7.1.min.js实现三层结构的复选框之间的勾选控制，详细阐述了相关逻辑和实现步骤。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >


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>


创建层级关系的checkBox
zyx95的博客
05-17 926
使用table或者div创建一个层级关系的checkbox列表
经典三级菜单树含复选框
08-03
经典三级菜单树含复选框。当点击父类时子类全选。。等等
js复选框，三层结构
bansha1495的博客
03-19 223
最终实现效果如下 html+css如下 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <link re...
三层联动选择框
weixin_30611509的博客
09-07 123
<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><html><head><metahttp-equiv="Content-Type"content="text/html;charset=gb2312...
vue3三级嵌套复选框（element-plus）
最新发布
weixin_62639453的博客
03-05 1480
当选择第一级的复选框时下面所有内容全选和取消全选，当选择第二的复选框时第三级的所有内容全选和取消全选。只要有一个第三级的内容没有选，二级和一级则不能勾上。第三级内容全选上了，第二级复选框就钩上。第二级也是同样的道理。
jquery实现tree 三级菜单选择器
xiaohuli_hyr的博客
04-01 1930
jquery实现tree树三级菜单选择器
CSS3待办事项列表复选框勾选特效
06-11
本主题聚焦于“CSS3待办事项列表复选框勾选特效”，这是一个利用CSS3特性实现的、用于增强用户体验的功能，使得待办事项列表中的复选框不仅具有美观的样式，还带有动态的勾选动画效果。下面将详细讲解这个特效涉及的...
带复选框的多级目录树，复选框的选择控制子节点父节点 全选和反选
11-13
在IT领域，尤其是在前端开发中，构建用户界面时经常需要处理多级目录树结构，并且在这样的结构中加入复选框功能，以便用户可以进行批量选择或者全选、反选操作。这种技术常用于文件管理器、权限设置、菜单配置等场景...
CSS3美化复选框checkbox
11-11
在网页设计中，CSS3（层叠样式表第三版）为开发者提供了许多强大的新特性，其中之一就是能够对复选框（checkbox）进行美化，从而提升用户界面的视觉吸引力和交互体验。复选框是HTML中一种基本的表单元素，通常用于让...
css3复选框选中变灰特效
06-24
在网页设计中，CSS3（层叠样式表第三版）为开发者提供了丰富的样式控制和交互效果，其中之一就是“复选框选中变灰特效”。这个特效使得用户在选中复选框时，关联的图片会变为灰色，以视觉上突出选中的状态。这种交互...
带复选框的树形菜单-
06-29
在"带复选框的树形菜单"中，"无限层级"意味着菜单可以扩展到任意深度，不仅限于两层或三层。这种设计适应了现实世界中复杂的数据结构，比如多级分类或组织架构。无限层级的实现通常需要递归算法或数据结构，如链表或...
三级菜单多选
11-22
三级菜单多选，$(document).ready(function() { $('.caputure').click(function(){ if($(this).siblings('ul').css('display')=='none'){ $(this).parent('li').siblings('li').slideDown(100); $(this).siblings('ul').slideDown(100).children('li'); if($(this).parents('li').siblings('li').children('ul').css('display')=='block'){ $(this).parents('li').siblings('li').children('ul').slideUp(100); } }else{ //控制子菜单隐藏 $(this).siblings('ul').slideUp(100); } }) tableCheckedAll(); tableCheckedList(); }); function tableCheckedAll(){ $(document.body).on('click', '.tabInputList', function(){ if($(this).prop('checked')){//获取是否选中 并判断 $(this).addClass("checked"); $(".tabInput").prop('checked', true); }else{ $(".tabInput").prop('checked', false); } }); }; function tableCheckedList(){ $(document.body).on('click', '.tabInputAll', function(){ var type=$(this).data("type"); if($(this).prop('checked')){//获取是否选中 并判断 $(this).addClass("checked"); $(".tabInputLast"+type).prop('checked', true); }else{ $(".tabInputLast"+type).prop('checked', false); } }); };
两层嵌套的checkbox记录选中状态
09-08
两层嵌套的checkbox记录选中状态，listview嵌套Gridview，Gridview嵌套Checkbox
MVC+三层架构模式购物车案例
10-13
这是一个基于 MVC+三层架构模式购物车案例的例子，供大家下载。
多选框 三级目录 菜单权限 的关联选择功能
acvc225的博客
07-20 1676
实现目标：三级目录菜单分别称为：顶级目录、次级目录、底级目录，实现对各层级目录进行选择操作时，同步影响其他目录的选择状态 具体要求： 1、当顶级目录取消选中时，次级目录和底级目录全部取消选中； 2、当有一个次级目录选中时，其顶级目录也为选中状态； 当有一个次级目录取消选中时，其底级目录全部取消选中； 当所有的次级目录都取消选中时，其顶级目录也取消选中； 3、当底级目录选中时，其次级目...
jQuery 实现 checkbox的树形菜单结构（2）
csl0l0的专栏
02-10 1162
&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt;    &lt;meta charset="utf-8"&gt;    &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;    &lt;title&gt;新
jeesite关于checkbox多选框的解决方案
qq_39930369的博客
07-26 5742
首先看看jeesite这个框架里面的写法： 其实就是查询了user的角色然后传过去，并且这个角色字段为list集合。嫌麻烦，直接写js算了。 直接用备用字段，使用dict 字典。也就是这个：   然后点修改的时候就是这样，因为这个字典方法嘛，返回多个值它就迷糊了，所以点修改没用，还是一个没勾选上这就很烦： 然后就用备用字段来显示新的，提交的时候就把备用字段的值赋给专业字段。进...
CheckBoxTree控件：自定义带复选框的树形结构
CheckBoxTree是一种树形控件，它在传统的树形结构中加入了复选框功能，允许用户进行多选操作。这类控件在软件开发中常用于展示具有层级关系的数据，同时提供复选功能以便于对这些数据项进行批量选择、操作或配置。在...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值