Jquery Checkbox 父、子节点进行选中、取消选中处理

效果图：

Html代码：

 <table class='table table-bordered table-striped'>
                                        <asp:Repeater ID="rpRole" runat="server" OnItemDataBound="rpRole_ItemDataBound">
                                            <ItemTemplate>
                                                <tr>
                                                    <td style="width: 80px;">
                                                        <label class="checkbox">
                                                            <input type="checkbox" class="uniform" name="menulist"
                                                                value="<%#Eval("menuid") %>" index="<%#Eval("menuid") %>" />
                                                            <%#Eval("menuname") %></label>
                                                    </td>
                                                    <td>
                                                        <asp:HiddenField ID="hfV" runat="server" Value='<%#Eval("menuid") %>' />
                                                        <asp:Literal ID="Literal1" runat="server"></asp:Literal>
                                                    </td>
                                                </tr>
                                            </ItemTemplate>
                                        </asp:Repeater>
                                    </table>
                                    <input type="hidden" id="hfRole" runat="server" />

C#后台代码：

using (WHSMDataContext db = new WHSMDataContext())
                    {
                        var xx = from p in db.Base_MenuList where p.isshow == 'Y' && p.fathermenuid != 0 select p;
                        rpRole.DataSource = xx;
                        rpRole.DataBind();
                    }
protected void rpRole_ItemDataBound(object sender, RepeaterItemEventArgs e)
        {
            if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
            {
                HiddenField xx = e.Item.FindControl("hfV") as HiddenField;

                var html = string.Empty;
                using (WHSMDataContext db = new WHSMDataContext())
                {
                    var lstBtn = from p in db.Base_Button where p.isshow == 'Y' select new { p.BtnID, p.BtnName, p.Icon };
                    html = @"<table class='table table-bordered table-striped' id='tb_"+xx.Value+"'><tr>";
                    foreach (var item in lstBtn)
                    {
                        html += "<td><div style=\"float: left\"><label class='checkbox'> <input type=\"checkbox\" name=\"btnlist\" 
index='" + xx.Value + "_" + item.BtnID + "' value='" + xx.Value + "_" + item.BtnID + "' /><img src='" + item.Icon + "' />" 
+ item.BtnName + "</label></div></td>";
                    }
                    html += "</table>";
                }
                Literal lt = e.Item.FindControl("Literal1") as Literal;
                lt.Text = html;

            }
        }

JS代码：

数据格式类型：

13_121,15_121,15_122,15_123,15_124,15_125,2_121,13_122,18_121,29_121,30_121,35_121,2_126,2_125,38_121,38_122,38_123,38_124,38_125,38_126

//编辑菜单信息
var clickStatu = false;//是否点击选择事件
function EditRoleInfo(editinfo) {
    var splitinfo = editinfo.split(';');
    valArrRole = new Array();
    $("#hfRoleID").val(splitinfo[0]);
    $("#txtRoleName").val(splitinfo[1]);
    $("#txtFckContent").val(splitinfo[2]);
   
     //编辑的追加到数据中，以便新增或者取消权限按钮
    valArrRole.push(splitinfo[3]);
 $("#hfRole").val(valArrRole.toString()); //alert(valArrRole.toLocaleString()); 
    //分配按钮时取出数据赋值给相应checkbox
    $("input[type='checkbox']").removeAttr("checked");//取消全选 [name='menulist']
    $(splitinfo[3].split(',')).each(function (i, dom)
    {
        $(":checkbox[value='" + dom + "']").prop("checked", true);
        //按钮对应的菜单复选框选中
        $(":checkbox[value='" + dom.split('_')[0] + "']").prop("checked", true);
    });
    //选择框事件
    $(":checkbox").click(function ()
    {
        if (clickStatu == false) {
            var vIndex = $("#tb_" + $(this).val());
            if ($(this).prop("checked") == true) {
                HandlerCheckBox(true, vIndex, $(this).val());
            }
            else {
                HandlerCheckBox(false, vIndex, $(this).val());
            }
            alert(valArrRole.toString());
            $("#hfRole").val('');
            $("#hfRole").val(valArrRole.toString());
            clickStatu = false;
           // alert($("#hfRole").val());
        }
    });
    $("#btnEditInfo").click(function () {
        if ($("#txtRoleName").val() == "") {
            $.msgbox("<span style='font-size:13px;line-height:30px;'>角色名称不能为空。</span>", { type: "error", 
buttons: [{ type: "submit", value: "确定" }] });
            $("#txtRoleName").focus();
            return false;
        }
        else if ($("#hfRole").val() == "") {
            $.msgbox("<span style='font-size:13px;line-height:30px;'>请选择权限。</span>", { type: "error", 
buttons: [{ type: "submit", value: "确定" }] });
            return false;
        }
        else {
            var updateinfo = $("#hfRoleID").val() + ";" + $("#txtRoleName").val() + ";" + $("#txtFckContent").val() + ";"
 + $("#hfRole").val();
            $.ajax(
                {
                    type: "post",
                    data: "EditRoleInfo=" + encodeURIComponent(updateinfo),
                    url: "../../WHSMHandler.ashx",
                    datatype: "html",
                    success: function (returnData, textstatus, xmlhttprequest) {
                        $.msgbox("<span style='font-size:12px;line-height:30px;'>[" + $("#txtRoleName").val() + "]角色信息修改成功。</span>",
                         {type: "info", buttons: [
                                { type: "submit", value: "确定" }
                            ]
                        }, function (result) {
                            ShowUserRoleHtml(returnData); $("#btnClose").click();
                        });
                    },
                    error: function () {
                        alert('修改：' + $("#txtRoleName").val() + '角色信息失败。');
                    }
                });
        }
    });
    //分页操作动作
    $(".pages").click(function () {
        PagingActionClick($(this), GetQueryString("mid").toString().split('?')[0], "ShowUserRoleInfo");
    })
    $("#btnReset").click(function () {
        $("input[type='checkbox']").removeAttr("checked"); 
        $("#txtRoleName,#txtFckContent,#hfRole").val('');
    });
}
//取消，选择菜单ID 及按钮ID
//ifTure:true选中 false 未选中
//tbIndex: 对应菜单下面的按钮 table表格
//ckIndex:选中的菜单 按钮 index
function HandlerCheckBox(ifTure,tbIndex,ckIndex)
{
     $("input:checkbox[value='" + ckIndex.split('_')[0] + "']").prop('checked', ifTure);
    if (tbIndex.find(":checkbox").length > 0) {
        tbIndex.find(":checkbox").prop('checked', ifTure);
        for (var i = 0; i < tbIndex.find(":checkbox").length; i++) {
            if (ifTure == true) {
                //alert(tbIndex.find(":checkbox")[i].name);
                valArrRole.push(tbIndex.find(":checkbox")[i].value);
            }
            else 
                RemoveRoleItem(tbIndex.find(":checkbox")[i].value);
        }
    }
    else {
        if (ifTure == true)
            valArrRole.push(ckIndex);
        else
            RemoveRoleItem(ckIndex);
    }
    clickStatu = true;
}

//存放权限数组用
var valArrRole = new Array();
var newArrRole = '';
//取消选中并对数组中的ID删除
 function RemoveRoleItem(name) {
    for (var i = 0; i < valArrRole.toString().split(',').length; i++)
    {
        if (valArrRole.toString().split(',')[i] != name)
            newArrRole += valArrRole.toString().split(',')[i] + ',';
    }
    valArrRole = new Array();
    valArrRole.push(newArrRole.substr(0, newArrRole.length - 1));
    valArrRole.sort();
    newArrRole = '';
}