<!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. Python Web开发中的WSGI协议简介

    在Python Web开发中,我们一般使用Flask.Django等web框架来开发应用程序,生产环境中将应用部署到Apache.Nginx等web服务器时,还需要uWSGI或者Gunicorn.一个 ...

  2. 邮件服务器启动postfix时的问题：master 已死，但 pid 文件仍存

    [root@linux115 ~]# service postfix restart  // 重启postfix关闭 postfix:[失败]  启动 postfix: [确定][root@linux ...

  3. vs如何在Windows身份验证下调试Web项目

    vs做的Web项目发布到IIS站点后,通常我们还希望利用vs来调试代码.如果Web在IIS中设置成了Windows身份验证,那么我们如何在vs调试的时候,也同样采用Windows身份认证进行调试呢? ...

  4. POJ1185炮兵阵地（状态压缩DP)

    POJ飞翔.数据弱 ZQOJ飞翔 数据强 Description 司令部的将军们打算在N×M的网格地图上部署他们的炮兵部队.一个N×M的地图由N行M列组成,地图的每一格可能是山地(用"H&q ...

  5. poj 3977 子集

    题目 题意:在一个集合中找到一个非空子集使得这个子集元素和的绝对值尽量小,和绝对值相同时保证元素个数尽量小 分析:1.二分枚举的思想,先分成两个集合: 2.枚举其中一个集合中所有的子集并且存到数组中, ...

  6. 移动性能测试 | 持续集成中的 Android 稳定性测试

    前言 谈到Android稳定测试,大多数会联想到使用monkey工具来做测试.google官方提供了monkey工具,可以很快速点击被应用,之前我有一篇帖子提到了monkey工具的使用,详见: htt ...

  7. oracle wm_concat函数 列转行 分组函数

    (1)select mark, wm_concat(status) from DISSENT_INFO t GROUP BY mark; 查出来的数据 mark     status 222      ...

  8. Thread.GetNamedDataSlot(String)

    https://docs.microsoft.com/zh-cn/dotnet/api/system.threading.thread.getnameddataslot?redirectedfrom= ...

  9. ssis error at other ssis.pipeline "ole db destination" failed validation and returned validation status

    我在修改一个ssis的包,发现这个destination的表被改过了.所以就重建了表.就导致了这个错误. 打开包重新检查下表结构的匹配就好了

  10. 如何利用fastjson将JSON格式的字符串转换为Map，再返回至前端成为js对象

    //注意,这里的jsonStr是json格式的字符串,里面如果遇到双引号嵌套双引号的,一般是嵌套的双引号经过转义 //    \",假如有这样的一个场景,这些字符串里面有需要的css样式的j ...