<!DOCTYPE html>

<html>

<head>

    <title></title>

    <script src="http://my.csdn.net/assets2/js/libs/jquery-1.9.0.min.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(function () {

            $("input[type='checkbox']").click(function () {

                var myid = $(this).attr("id");

                //alert(myid);

                var isSel = $(this).is(":checked");

                selectChkbox(0, myid, isSel);

                selectParentChkbox($(this));

            });

        });

        //变更子节点

        function selectChkbox(n,parentid, isSel) {

            var len = $("input[type='checkbox']").length;

            for (var i = n; i < len; i++) {

                var inp = $("input[type='checkbox']").eq(i);

                var pid = inp.attr("data-parent");

                if (parentid == pid) {

                    if (isSel) {

                        inp.prop("checked", true);

                    } else {

                        inp.prop("checked", false);

                    }

                    selectChkbox(i, inp.attr("id"), isSel);

                }

            }

        }

        //变更父节点

        function selectParentChkbox(clickINP) {

            var parentid = clickINP.attr("data-parent");

            if (parentid != "null") {

                if (!clickINP.is(":checked")) {

                    selectParentChkF(parentid);

                } else {

                    selectParentChkT(parentid);

                }

            }

        }

        function selectParentChkF(parentid) {

            $("#" + parentid).prop("checked", false);

            parentid = $("#" + parentid).attr("data-parent");

            if (parentid != "null")

                selectParentChkF(parentid);

        }

        function selectParentChkT(parentid) {

            var parentSel = true;

            $("input[type='checkbox']").each(function () {

                var pid = $(this).attr("data-parent");

                if (parentid == pid) {

                    if (!$(this).is(":checked")) {

                        parentSel = false;

                    }

                }

            });

            if (parentSel) {

                $("#" + parentid).prop("checked", true);

                parentid = $("#" + parentid).attr("data-parent");

                if (parentid != "null")

                    selectParentChkT(parentid);

            } else {

                selectParentChkF(parentid);

            }

        }

    </script>

</head>

<body>

 <div>

  <div>A<input id="A" data-parent="null" type="checkbox" /></div>

  <div style=" margin-left:16px;">B<input id="B" data-parent="A" type="checkbox" /></div>

  <div style=" margin-left:32px;">B-1<input id="B-1" data-parent="B" type="checkbox" /></div>

  <div style=" margin-left:32px;">B-2<input id="B-2" data-parent="B" type="checkbox" /></div>

  <div style=" margin-left:48px;">B-2-1<input id="B-2-1" data-parent="B-2" type="checkbox" /></div>

  <div style=" margin-left:48px;">B-2-2<input id="B-2-2" data-parent="B-2" type="checkbox" /></div>

  <div style=" margin-left:16px;">C<input id="C" data-parent="A" type="checkbox" /></div>

  <div style=" margin-left:32px;">D<input id="D" data-parent="C" type="checkbox" /></div>

  <div style=" margin-left:32px;">E<input id="E" data-parent="C" type="checkbox" /></div>

 </div>

</body>

</html>

树checkbox选择jquery实例的更多相关文章

  1. 转：zTree树控件入门之checkbox：如何动态设置节点的checkbox选择框启用与禁用状态（chkDisabled)

    当一棵树的部分节点根据登入用户角色不同而决定是否启用节点前的checkbox选择框的时候,我们应该如何做呢?也或者如何在页面加载的时候动态根据当前登入用户角色动态切换节点前的checkbox的禁用状态 ...

  2. checkbox全选，反选，取消选择 jquery

    checkbox全选,反选,取消选择 jquery. //checkbox全部选择 $(":checkbox[name='osfipin']").each(function(){ ...

  3. 基础 jQuery 实例

    基础 jQuery 实例 jQuery 原则: 由于 jQuery 是为处理 HTML 事件而特别设计的,那么当您遵循以下原则时,您的代码会更恰当且更易维护: 把所有 jQuery 代码置于事件处理函 ...

  4. 值得 Web 开发人员学习的20个 jQuery 实例教程

    这篇文章挑选了20个优秀的 jQuery 实例教程,这些 jQuery 教程将帮助你把你的网站提升到一个更高的水平.其中,既有网站中常用功能的的解决方案,也有极具吸引力的亮点功能的实现方法,相信通过对 ...

  5. jQuery实例——jQuery实现联动下拉列表查询框--转http://www.cnblogs.com/picaso/archive/2012/04/08/2437442.html#undefined

    jQuery实例--jQuery实现联动下拉列表查询框   在查询与列表显示的时候经常用到联动列表显示,比如一级选项是国家,二级选项是省,三级是市,这样的联动是联系的实时导出的,比如你不可能选择了四川 ...

  6. cocos2dx2.2.2登录场景中Checkbox选择框的实现

    在前两篇文章中,我们介绍了在注册场景中需要用到的输入框及弹出框的实现方式,这两篇文章中介绍的内容在登录场景同样会用到.而我们经常会在登录场景中见到的另一种元素就是自动登录或者记住密码的Checkbox ...

  7. jQuery使用（十一）：jQuery实例遍历与索引

    each() children() index() 一.jQuery实例遍历方法each() jQuery实例上的each()方法规定要运行的函数,并且给函数传入两个参数:index,element. ...

  8. 三种动态加载js的jquery实例代码另附去除js方法

    !-- 这里为你提供了三种动态加载js的jquery实例代码哦,由于jquery是为用户提供方便的,所以利用jquery动态加载文件只要一句话$.getscript("test.js&quo ...

  9. JQuery中_Radio、DropDownList、Checkbox选择控件的处理

    Radio  1.获取选中值,三种方法都可以: $('input:radio:checked').val(): $("input[type='radio']:checked").v ...

随机推荐

  1. 10.8 wtx模拟题题解

    填坑 orz w_x_c_q w_x_c_q的模拟赛(150pts,炸了) money 题目背景: 王小呆又陷入自己的梦里.(活在梦里...) 题目描述: 王小呆是一个有梦想的小菜鸡,那就是赚好多好多 ...

  2. CF580B Kefa and Company 尺取法

    Kefa wants to celebrate his first big salary by going to restaurant. However, he needs company. Kefa ...

  3. springboot整合mybatis,redis,代码(五)

    redis注解开发过程中包含许多注解 1.@Cacheable 可以标记在方法上,也可以标记在类上.当标记在方法上时表示该方法是支持缓存的,当标记在类上时则表示该类所有的方法都是支持缓存的.应用到读取 ...

  4. adminLte 解决菜单栏 bug

    <ul class="sidebar-menu" data-widget="tree">    功能菜单 点击 不隐藏第三级 子菜单....在 ad ...

  5. sharepoint_study_13

    描述: 解决: 1.修改了密码和账户,找到对应的应用程序池,修改用户名和密码,重启iis. 2.站点上安装的产品(如:工作流)启动需要用户名和密码,找到对应的服务,修改用户名和密码并重启该服务.

  6. SQL Server 清理日志

    USE[master] GO ALTER DATABASE 要清理的数据库名称 SET RECOVERY SIMPLE WITH NO_WAIT GO ALTER DATABASE 要清理的数据库名称 ...

  7. 27-----BBS论坛

    BBS论坛(二十七) 27.首页帖子列表布局完成 (1)apps/models.py 把帖子跟用户关联起来 class PostModel(db.Model): __tablename__ = 'po ...

  8. css连续的纯数字或字母强制换行

    white-space:normal; word-break:break-all; white-space: normal|pre|nowrap|pre-wrap|pre-line|inherit;w ...

  9. mysql查看sql语句的设置

    SHOW VARIABLES LIKE "general_log%"; SET GLOBAL general_log_file = 'D:\\mysql.log'; SET GLO ...

  10. 人工智能和机器学习 AI&ML howto

    我关心的AI.ML的分支领域: 我的博客:Deep Learning 和 Knowledge Graph howto (有关DL&KG的资料都在这里) https://www.cnblogs. ...