树checkbox选择jquery实例

来源：互联网发布：阿里云域名备案服务号编辑：程序博客网时间：2024/06/16 06:20
<!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>
0 0