首页 > Web开发 > 详细

jquery checkbox 三级联动=》优化（自定义数据拼接页面）

时间：2021-05-17 13:19:41      阅读：8      评论：0      收藏：0      [点我收藏+]

如图

技术分享图片

 

需求：

（1）：选中一级文字（全选）或者一级复选框（checkbox），做到全选的效果

（2）：选中二级文字，切换二级样式和三级对应内容，选中二级复选框，对应三级全部选中。若二级全部选中，则一级为选中状态

（3）：选中三级文字或者复选框，默认选中当前项。若当前三级全部选中，对应的二级也应该选中

 

代码（注意：复制下来直接可以用，jquery需本地引入）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta charset="utf-8" />
    <title>Blank Page - Ace Admin</title>
    <script src="js/jquery-2.1.4.min.js"></script>
    <meta name="description" content="" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
    <style>
        .cont {
            width: 100%;
            position: relative;
            overflow: hidden;
            height: 100px;
        }
        
        .divRow {
            width: 100%;
            margin-bottom: 10px;
            text-indent: 10px;
            cursor: pointer;
        }
        
        .listbox {
            overflow: hidden;
            margin-bottom: 5px;
            display: inline-block;
            float: left;
        }
        
        .listleft {
            float: left;
            padding: 5px 10px;
            border-bottom: 0px;
            border-bottom: solid 1px #ccc;
            cursor: pointer;
        }
        
        .listright {
            padding: 5px 10px;
            display: block;
            float: left;
            position: absolute;
            top: 76px;
            left: 0;
        }
        
        .listright label.position-relative {
            margin-left: 40px;
            cursor: pointer;
        }
        
        .listright label.position-relative:first-child {
            margin-left: 0px;
        }
        
        .addleftClass {
            border-top: solid 1px #ccc;
            border-left: solid 1px #ccc;
            border-right: solid 1px #ccc;
            border-bottom: 0px;
        }
    </style>
</head>

<body class="no-skin">
    <div class="cont">
        <!-- <div class="divRow">
            <label class="position-relative menu-all">
                <input type="checkbox" class="ace check1" />
            </label>
            <span class="checkValue" id="allCheck"></span>
        </div>
        <div class="listbox">
            <div class="listleft addleftClass">
                <label class="position-relative">
                    <input type="checkbox" class="ace check2" name="node_ids[]"/>
                  </label> 默认分组
            </div>
            </br>
            <div class="listright">
                <label class="position-relative">
                <input type="checkbox" class="ace check3"/>
                合肥论坛
                </label>
                <label class="position-relative">
                <input type="checkbox" class="ace check3" /> 
                合肥热线
                </label>
                <label class="position-relative">
                <input type="checkbox" class="ace check3" />
                合肥先锋网
                </label>
            </div>
        </div>
        <div class="listbox">
            <div class="listleft">
                <label class="position-relative">
                <input type="checkbox" class="ace check2" name="node_ids[]"/>
                </label> 重点网站
            </div>
            </br>
            <div class="listright" style="display: none;">
                <label class="position-relative">
                <input type="checkbox" class="ace check3" />
                重点网站1
                </label>
                <label class="position-relative">
                <input type="checkbox" class="ace check3" /> 
                重点网站2
                </label>
            </div>
        </div>
        <div class="listbox">
            <div class="listleft">
                <label class="position-relative">
                <input type="checkbox" class="ace check2" name="node_ids[]"/>
                </label> 普通网站
            </div>
            </br>
            <div class="listright" style="display: none;">
                <label class="position-relative">
                <input type="checkbox" class="ace check3" />
                普通网站1
                </label>
                <label class="position-relative">
                <input type="checkbox" class="ace check3" /> 
                普通网站2
                </label>
                <label class="position-relative">
                <input type="checkbox" class="ace check3" /> 
                普通网站3
                </label>
            </div>
        </div> -->
    </div>

    <!--[if !IE]> -->
    <script type="text/javascript">
        window.jQuery || document.write("<script src=‘../assets/js/jquery.min.js‘>" + "<" + "/script>");
    </script>

    <script>
        var checkList = [{
            name: ‘全选‘,
            id: 1,
            host: 1,
            children: [{
                name: "默认分组",
                id: 11,
                host: 11,
                children: [{
                    name: "合肥论坛",
                    id: 111,
                    host: 111,
                }, {
                    name: "合肥热线",
                    id: 112,
                    host: 112,
                }, {
                    name: "合肥先锋网",
                    id: 113,
                    host: 113,
                }]
            }, {
                name: "重点网站",
                id: 22,
                host: 22,
                children: [{
                    name: "重点网站1",
                    id: 221,
                    host: 221,
                }, {
                    name: "重点网站2",
                    id: 222,
                    host: 222,
                }]
            }, {
                name: "普通网站",
                id: 33,
                host: 33,
                children: [{
                    name: "普通网站1",
                    id: 331,
                    host: 331
                }, {
                    name: "普通网站2",
                    id: 332,
                    host: 332
                }]
            }]
        }]

        var check3List = []
        $(document).ready(function() {
            var checkTwoF = ‘<div class="divRow">‘;
            checkTwoF += ‘<label class="position-relative menu-all">‘;
            checkTwoF += ‘<input type="checkbox" class="ace check1" id="allButton"/>‘
            checkTwoF += ‘</label>‘;
            checkTwoF += ‘<span class="checkValue">‘ + checkList[0].name + ‘</span>‘;
            checkTwoF += ‘</div>‘
            for (var i = 0; i < checkList[0].children.length; i++) {
                checkTwoF += ‘<div class="listbox">‘;
                if (i == 0) {
                    checkTwoF += ‘<div class="listleft addleftClass">‘;
                } else {
                    checkTwoF += ‘<div class="listleft">‘;
                }
                checkTwoF += ‘<label class="position-relative">‘;
                checkTwoF += ‘<input type="checkbox" class="ace check2" name="node_ids[]"/>‘;
                checkTwoF += ‘</label>‘ + checkList[0].children[i].name;
                checkTwoF += ‘</div>‘;
                checkTwoF += ‘</br>‘;
                if (i == 0) {
                    checkTwoF += ‘<div class="listright">‘;
                } else {
                    checkTwoF += ‘<div class="listright" style="display: none;">‘;
                }
                for (var j = 0; j < checkList[0].children[i].children.length; j++) {
                    checkTwoF += ‘<label class="position-relative">‘;
                    checkTwoF += ‘<input type="checkbox" class="ace check3" />‘ + checkList[0].children[i].children[j].name;
                    checkTwoF += ‘</label>‘;
                }
                checkTwoF += ‘</div>‘;
                checkTwoF += ‘</div>‘;
            }
            $(".listleft:first").addClass("addleftClass")
            $(".cont").html(checkTwoF)
        })

        $(function() {
                check3();
                check2();
                check1();
                checkInput();
                check2Value()

            })
            // 点击全选文字
        function checkInput() {
            $(‘.checkValue‘).click(function() {
                var checkValue = $(this).siblings().find(".check1").prop("checked")
                if (checkValue == false) {
                    $(this).siblings().find(".check1").prop("checked", true)
                    $(this).parent().siblings().find("input[type=‘checkbox‘]").prop(‘checked‘, true);
                } else if (checkValue == true) {
                    $(this).siblings().find(".check1").prop("checked", false)
                    $(this).parent().siblings().find("input[type=‘checkbox‘]").prop(‘checked‘, false);
                }
            })
        };
        // 点击全选框
        function check1() {
            $(‘.check1‘).click(function() {
                var ok = $(this).prop("checked");
                $(this).parents(‘.divRow‘).siblings().find("input[type=‘checkbox‘]").prop(‘checked‘, ok);
            })
        }

        function check2() {
            $(‘.listleft‘).click(function() {
                $(this).addClass("addleftClass")
                $(this).parent(‘.listbox‘).siblings().find(".listleft").removeClass("addleftClass")
                $(this).siblings().css("display", ‘block‘)
                $(this).parent(".listbox").siblings().find(".listright").css("display", ‘none‘)
            })
        }

        function check2Value() {
            $(".check2").click(function() {
                var ok = $(this).prop("checked");
                $(this).parents(".listleft").siblings().andSelf().find(‘.check3‘).prop("checked", ok);
                var oCheck2 = $(this).parents(‘.listbox‘).siblings().andSelf().find(".check2");
                if (($(".listbox").find("input[type=‘checkbox‘]:checked").length) == $(".listbox").find("input[type=‘checkbox‘]").length) {
                    $("#allButton").prop("checked", true);
                } else {
                    $("#allButton").prop("checked", false);
                }
            })

        }

        function check3() {
            $(‘.check3‘).click(function() {
                var ockeck3 = $(this).parent().siblings().andSelf().find(".check3");
                var ockeck3Value = $(this).parent().siblings().andSelf().find(".check3").prop("checked")
                if (ockeck3Value == true) {
                    check3List.push(ockeck3Value)
                } else {
                    check3List.pop(ockeck3Value)
                };
                if ($(this).parents(".listright").find("input[type=‘checkbox‘]").length == $(this).parents(".listright").find("input[type=‘checkbox‘]:checked").length) {
                    $(this).parents(".listright").siblings(".listleft").find("input[type=‘checkbox‘]").prop("checked", true)
                } else {
                    $(this).parents(".listright").siblings(".listleft").find("input[type=‘checkbox‘]").prop("checked", false)
                }
                var oCheck1 = $(this).parents(‘.listbox‘).siblings().andSelf().find(‘.check2‘);
                if (($(".listbox").find("input[type=‘checkbox‘]:checked").length) == $(".listbox").find("input[type=‘checkbox‘]").length) {
                    $("#allButton").prop("checked", true);
                } else {
                    $("#allButton").prop("checked", false);
                }
            })
        }

        // 找同级元素的checked状态
        function trueorfalse(obj) {
            var bool = false;
            $(obj).each(function() {
                if ($(this).prop("checked")) {
                    bool = true;
                }
            })
            return bool;
        }
    </script>
</body>

</html>

jquery checkbox 三级联动=》优化（自定义数据拼接页面）

原文：https://www.cnblogs.com/guohanting/p/14776222.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
分享档案
更多>
2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)
最新文章
更多>
教程昨日排行
更多>
友情链接
汇智网   PHP教程   插件网  
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣，分享程序人生！