三级折叠复选框-全选模板

最新推荐文章于 2024-03-05 00:01:32 发布

原创

最新推荐文章于 2024-03-05 00:01:32 发布 · 716 阅读

5 ·

CC 4.0 BY-SA版权

该博客展示了如何利用HTML、CSS和JavaScript实现一个三级折叠的复选框模板，其中包括全选功能。文章提供了一个后端JSON样例，并详细分解了实现步骤：1) HTML结构设计；2) JavaScript方法，强调只需替换'menus'即可应用；3) CSS样式设置，用于初始化二三级折叠及全选按钮居中对齐。

实际效果
在这里插入图片描述
后端json样例

{
    "state":0,
    "msg":"success",
    "data":{
        "roleId":"3",
        "menus":[
            {
                "id":57000,
                "text":"权限管理",
                "url":"",
                "targetType":"一级菜单",
                "checked":true,
                "mvs":[
                    {
                        "id":57003,
                        "text":"日志管理",
                        "url":"log.html",
                        "targetType":"二级菜单",
                        "checked":false,
                        "mvs":[
                            {
                                "id":5700301,
                                "text":"日志管理-查看",
                                "url":"",
                                "targetType":"三级按钮",
                                "checked":false,
                                "mvs":null