<!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. CoreData 数据库

    封装CoreManager类 @implementation CoreDataManager { //上下文 NSManagedObjectContext *_ctx; } //单例 +(instan ...

  2. .net mvc 框架实现后台管理系统 3

    左侧菜单实现 默认html <div class="layui-side layui-bg-black h-slide"> <div class="la ...

  3. BZOJ3620（kmp）

    要点 本题使用\(O(n^2)\)的算法 外层枚举左端点,内层一直kmp到结尾,中间遇到合法的就ans++ 如果是acccca这种数据直接kmp过程顺手判断即可:但是aaa这种数据,j = 2,实际判 ...

  4. IP 地址分类

    1.1 网络IP地址分类 网络通讯过程中数据封装与解封过程(网际互联通讯过程) TCP/IP模型 1)应用层 总结记录一些常见网络协议以及对应的端口号(FTP HTTP telnet) 2)主机到主机 ...

  5. Oracle的CLOB大数据字段类型

    转载:https://www.cnblogs.com/Grand-Jon/p/7389427.html 一.Oracle中的varchar2类型 我们在Oracle数据库存储的字符数据一般是用VARC ...

  6. esper（4-1）-简单context

    1.创建context语法 create context context_name partition [by] event_property [and event_property [and ... ...

  7. mc04_IntelliJ IDEA常用设置

    字体设置 File --> Settings --> Font 项目编码设置 File --> Settings --> File Encodings 项目依赖 即一个项目引用 ...

  8. python--upload file into HDFS 加载文件到HDFS

    模拟:https://creativedata.atlassian.net/wiki/spaces/SAP/pages/61177860/Python+-+Read+Write+files+from+ ...

  9. 研磨设计模式学习笔记4--单例模式Signleton

    需求:加载配置文件,由于配置文件全局唯一,所以不用过多对象,建一个就可以了. 优点:单例模式本质就是为了控制实例数目. 一.饿汉式 public class Singleton { private S ...

  10. idea+springboot+Mybatis搭建web项目

    使用idea+springboot+Mybatis搭建一个简单的web项目. 首先新建一个项目: 在这里选择Maven项目也可以,但是IDEA为我们提供了一种更方便快捷的创建方法,即Spring In ...