zoukankan      html  css  js  c++  java
  • 树checkbox选择jquery实例

    <!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>
    

  • 相关阅读:
    1 基本概念 进入java世界
    一文了解kudu【转载】
    jenkins git项目clean before checkout 和 wipe out repository & force clone
    jenkins 内置判断条件
    jenkins常用插件使用说明-git publisher
    常用正则表达式
    基于ldap+sentry+rbac的hive数据库权限测试
    nginx_mirror_module流量复制在项目中的应用
    jenkins上job误删除怎么恢复
    pipeline语法学习日记
  • 原文地址:https://www.cnblogs.com/letnet/p/8525111.html
Copyright © 2011-2022 走看看