树checkbox选择jquery实例

最新推荐文章于 2024-07-30 03:25:04 发布

大吉大利_LiKe

最新推荐文章于 2024-07-30 03:25:04 发布

阅读量4.4k

点赞数 1

分类专栏： JS 文章标签： tree checkbox jquery 树

本文链接：https://blog.csdn.net/letnet1981/article/details/51693023

版权

JS 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

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