Jquery实现Checkbox三级联动

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

踏平扶桑

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

阅读量4.4k

点赞数 2

本文链接：https://blog.csdn.net/wdw984/article/details/8525194

版权

ASP.NET 同时被 3 个专栏收录

40 篇文章 1 订阅

订阅专栏

JavaScript

14 篇文章 0 订阅

订阅专栏

Jquery

11 篇文章 0 订阅

订阅专栏

一、测试的数据（JSON格式，用存储过程生成的）

[{"count":16,"list":[{"MenuID":3,"MenuName":"信息管理","MenuCode":"msg","MenuCount":2,"MenuList":[{"MenuID":4,"MenuName":"信息发布","MenuCode":"msg_publis"},{"MenuID":5,"MenuName":"信息列表","MenuCode":"msg_list"}]},{"MenuID":6,"MenuName":"会员管理","MenuCode":"user","MenuCount":1,"MenuList":[{"MenuID":7,"MenuName":"会员列表","MenuCode":"user_list"}]},{"MenuID":8,"MenuName":"积分管理","MenuCode":"jf","MenuCount":1,"MenuList":[{"MenuID":9,"MenuName":"积分类别","MenuCode":"jf_type"}]},{"MenuID":10,"MenuName":"发布管理","MenuCode":"ps","MenuCount":1,"MenuList":[{"MenuID":11,"MenuName":"标签管理","MenuCode":"ps_lable"}]},{"MenuID":13,"MenuName":"管理员管理","MenuCode":"admin","MenuCount":4,"MenuList":[{"MenuID":14,"MenuName":"管理员组","MenuCode":"admin_gp"},{"MenuID":15,"MenuName":"权限管理","MenuCode":"admin_rule"},{"MenuID":43,"MenuName":"管理员列表","MenuCode":"admin_list"},{"MenuID":45,"MenuName":"部门管理","MenuCode":"admin_bm"}]},{"MenuID":16,"MenuName":"商品管理","MenuCode":"sp","MenuCount":2,"MenuList":[{"MenuID":26,"MenuName":"商品列表","MenuCode":"sp_list"},{"MenuID":27,"MenuName":"商品类别","MenuCode":"sp_type"}]},{"MenuID":17,"MenuName":"活动管理","MenuCode":"hd","MenuCount":1,"MenuList":[{"MenuID":28,"MenuName":"活动列表","MenuCode":"hd_list"}]},{"MenuID":18,"MenuName":"支付管理","MenuCode":"pay","MenuCount":1,"MenuList":[{"MenuID":29,"MenuName":"支付接口管理","MenuCode":"pay_api"}]},{"MenuID":19,"MenuName":"短信管理","MenuCode":"sms","MenuCount":2,"MenuList":[{"MenuID":30,"MenuName":"短信发送","MenuCode":"sms_send"},{"MenuID":31,"MenuName":"短信列表","MenuCode":"sms_list"}]},{"MenuID":20,"MenuName":"代金券管理","MenuCode":"djq","MenuCount":2,"MenuList":[{"MenuID":32,"MenuName":"代金券发放","MenuCode":"djq_send"},{"MenuID":33,"MenuName":"代金券列表","MenuCode":"djq_list"}]},{"MenuID":21,"MenuName":"优惠券管理","MenuCode":"yhq","MenuCount":2,"MenuList":[{"MenuID":34,"MenuName":"优惠券发放","MenuCode":"yhq_send"},{"MenuID":35,"MenuName":"优惠券列表","MenuCode":"yhq_list"}]},{"MenuID":22,"MenuName":"现金券管理","MenuCode":"xjq","MenuCount":2,"MenuList":[{"MenuID":36,"MenuName":"现金券发放","MenuCode":"xjq_send"},{"MenuID":37,"MenuName":"现金券列表","MenuCode":"xjq_list"}]},{"MenuID":23,"MenuName":"物流管理","MenuCode":"wl","MenuCount":1,"MenuList":[{"MenuID":38,"MenuName":"物流公司管理","MenuCode":"wl_cmp"}]},{"MenuID":24,"MenuName":"订单管理","MenuCode":"order","MenuCount":1,"MenuList":[{"MenuID":39,"MenuName":"订单列表","MenuCode":"order_list"}]},{"MenuID":25,"MenuName":"店铺管理","MenuCode":"shop","MenuCount":1,"MenuList":[{"MenuID":40,"MenuName":"店铺列表","MenuCode":"shop_list"}]},{"MenuID":51,"MenuName":"网站设置","MenuCode":"site","MenuCount":2,"MenuList":[{"MenuID":42,"MenuName":"后台菜单管理","MenuCode":"site_menu"},{"MenuID":49,"MenuName":"网站信息设置","MenuCode":"site_cfg"}]}]}]

二、ASPX页面代码

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="AdminRules.aspx.cs" Inherits="Manager_Admins_AdminRules" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>权限管理</title>
    <script type="text/javascript" src="../../Scripts/Jquery/jquery-1.6.2.js"></script>
    <script type="text/javascript" src="js/AdminRules.js"></script>
    <style type="text/css">
        ul
        {
            list-style: none;
            text-align: left;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div id="div_info">
    </div>
    <div id="div_content">
    </div>
    <div>
        <input type="button" id="btn_save" value="保存" οnclick="GetRules()" />
        <input type="hidden" id="h_Rules" />
    </div>
    </form>
</body>
</html>

三、AdminRules.js代码

$(document).ready(function (e)
{
    var dd;
    $.ajax({
        type: "POST",
        data: "g_cmd=get",
        url: "Ashx/AdminRules.ashx",
        contentType: "application/x-www-form-urlencoded; charset=utf-8",
        dataType: "text",
        success: function (text)
        {
            CreteHtml(text);
        },
        error: function (request, message, ex)
        {
            alert("错误：" + message);
        }
    });

})
//动态创建checkbox集合
function CreteHtml(json)
{
    var dataObj = eval(json);
    var table = $("<table id='tb_content' border='1'><tr><td> </td><td>功能名称</td><td>权限选项</td></tr>");
    table.appendTo($("#div_content"));

    $.each(dataObj[0].list, function (idx, item)
    {
        var tr = $("<tr></tr>");
        var tdcbox = $("<td></td>");
        var td = $("<td>" + item.MenuName + "</td>");
        var cb = $("<input type='checkbox' id='" + item.MenuCode + "' οnclick='CheckAll(this.id)' />");
        cb.appendTo(tdcbox);
        tdcbox.appendTo(tr);
        td.appendTo(tr);
        tr.appendTo(table);
        td = $("<td></td>");
        var menus = item.MenuList;
        $.each(menus, function (idx1, item1)
        {
            var ul = $("<ul></ul>");
            var li_ruls = $("<li><input type='checkbox' id='" + item1.MenuCode + "_mody' οnclick='CheckParent(this.id)' />修改<input type='checkbox' id='" + item1.MenuCode + "_add' οnclick='CheckParent(this.id)' />增加<input type='checkbox' id='" + item1.MenuCode + "_del' οnclick='CheckParent(this.id)' />删除</li>");
            var li = $("<li><input type='checkbox' id='" + item1.MenuCode + "' οnclick='CheckParent(this.id)' />" + item1.MenuName + "</li>");
            li.appendTo(ul);
            li_ruls.appendTo(ul);
            ul.appendTo(td);
            td.appendTo(tr);
            tr.appendTo(table);
        });

    });
    $("#div_content").append("</table>");
}
//全选全不全功能
function CheckAll(id)
{
    if ($("input[type=checkbox][id='" + id + "']").is(":checked"))
    {
        $("input[type=checkbox][id^='" + id + "']").attr("checked", true);//当前ID开头的checkbox全选
    }
    else
    {
        $("input[type=checkbox][id^='" + id + "']").attr("checked", false); //当前ID开头的checkbox全不选
    }

}
//checkbox联动
function CheckParent(id)
{
    CheckAll(id);//先进行是否全选的操作
    var s_ParentID = id.substring(0, id.indexOf('_'));//取得一级checkbox的id
    var s_tmp = id.substring(id.indexOf('_') + 1, id.length);
    s_tmp = s_tmp.substring(0, s_tmp.indexOf('_'));
    var s_ParentID_ID = s_ParentID + "_" + s_tmp;//取得二级checkbox的id
    var tf = false;//一级checkbox是否全选
    var tf1 = false;//二级checkbox是否全选
    if (!s_tmp == "")//为空的话说明是点击的二级checkbox，不用判断三级checkbox的状态
    {
        if (!$("input[type=checkbox][id='" + s_ParentID_ID + "']").is(":checked"))
        {
            $("input[type=checkbox][id='" + s_ParentID_ID + "']").attr("checked", true);//如果三级checkbox有选中的情况，二级的checkbox也会选中
        }
        else
        {
            l = $("input[type=checkbox][id^='" + s_ParentID_ID + "']");//获取三级checkbox的集合

            $.each(l, function (idx, item)//循环
            {
                if (s_ParentID_ID != $(item)[0].id)//不判断自己(二级checkbox)
                {
                    if ($("input[type=checkbox][id='" + $(item)[0].id + "']").is(":checked"))
                    {
                        tf1 = true;//如果三级checkbox有选中的直接赋值为true并退出each
                        return false;
                    }
                }
            })
            $("input[type=checkbox][id='" + s_ParentID_ID + "']").attr("checked", tf1);//更新二级checkbox的选中状态

        }
    }

    if (!$("input[type=checkbox][id='" + s_ParentID + "']").is(":checked"))
    {
        $("input[type=checkbox][id='" + s_ParentID + "']").attr("checked", true); //如果二级checkbox有选中的情况，一级的checkbox也会选中
    }
    else
    {
        var l = $("input[type=checkbox][id^='" + s_ParentID + "']"); //获取二级checkbox的集合
        $.each(l, function (idx, item)//循环
        {
            if (s_ParentID != $(item)[0].id)//不判断自己(一级checkbox)
            {
                if ($("input[type=checkbox][id='" + $(item)[0].id + "']").is(":checked"))
                {
                    tf = true; //如果二级checkbox有选中的直接赋值为true并退出each
                    return false;
                }
            }
        })
        $("input[type=checkbox][id='" + s_ParentID + "']").attr("checked", tf); //更新一级checkbox的选中状态
    }
}

四、AdminRules.ashx代码直接context.Response.Write第一条的字符串即可。

踏平扶桑

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Jquery实现Checkbox三级联动

一、测试的数据（JSON格式，用存储过程生成的）[{"count":16,"list":[{"MenuID":3,"MenuName":"信息管理","MenuCode":"msg","MenuCount":2,"MenuList":[{"MenuID":4,"MenuName":"信息发布","MenuCode":"msg_publis"},{"MenuID":5,"MenuName":"信
复制链接

扫一扫