<!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. [USACO09FEB]改造路Revamping Trails 分层最短路 Dijkstra BZOJ 1579

    题意翻译 约翰一共有N)个牧场.由M条布满尘埃的小径连接.小径可 以双向通行.每天早上约翰从牧场1出发到牧场N去给奶牛检查身体. 通过每条小径都需要消耗一定的时间.约翰打算升级其中K条小径,使之成为高 ...

  2. [Groovy]static typing

    一般想到Groovy是JVM上的动态语言,都不知道它还有Static Typeing的功能 import groovy.transform.TypeChecked void someMethod() ...

  3. mysql 配置utf8 编码,支持 emoji 方法!!!

    utf8_general_ci 已经 过时了...请以后用mysql 考虑使用 utf8mb4, utf8mb4_unicode_ci!!! 兼容性更好. mysql的utf8编码的一个字符最多3个字 ...

  4. Luogu P5201 [USACO19JAN]Shortcut 最短路树？？？

    最短路树...开眼界了...之前想也没想过.... 先跑出来1到每个点最短路,然后建树时要标记点的入度,否则会多连边...然后深搜时更新新答案就是 #include<cstdio> #in ...

  5. Codeforces Round #532 (Div. 2)- C（公式计算）

    NN is an experienced internet user and that means he spends a lot of time on the social media. Once ...

  6. 74th LeetCode Weekly Contest Preimage Size of Factorial Zeroes Function

    Let f(x) be the number of zeroes at the end of x!. (Recall that x! = 1 * 2 * 3 * ... * x, and by con ...

  7. day18 约束 异常

    1. 类的约束 方案一:抛出异常,子类必须重写父类方法,否则会报错 class Base: def login(self): #强制xxx做XXX事 raise NotImplementedError ...

  8. ZPL通用打印类

    using System;using System.Collections.Generic;using System.IO;using System.Runtime.InteropServices;u ...

  9. 《高性能mysql》笔记

    组合索引和sql中的顺序有关 单列索引和sql中的顺序无关

  10. java——数组操作

    排序.二分查找.复制数组.填充 package follow_pack; import java.util.Arrays; import java.text.DecimalFormat; public ...