利用JavaScript实现GridView上方的 全选中，全驳回 控制 GridView中 CheckBox的功能

注意点：

1.选中 全核准 下方的核准checkbox 被选中，同时驳回的checkbox 要取消选中状态。

2.选中 全驳回 功能类似上方

3.选中下方的 核准checkbox 要使对应的驳回checkbox取消选中状态。同时要注意上方的 全核准 和全驳回 checkbox。

关键代码：

HTML:

        <p><asp:Literal ID="ApproveCheckBoxIDsArray" runat="server"></asp:Literal>
        <asp:Literal ID="RejectCheckBoxIDsArray" runat="server"></asp:Literal></p>

 

                    <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="form_no" CellPadding="4"
                        ForeColor="#333333" GridLines="Both" AllowSorting="True" OnSorting="GridView1_Sorting" AllowPaging="True" OnPageIndexChanging="GridView1_PageIndexChanging"
                        OnRowDataBound="GridView1_RowDataBound" OnDataBound="GridView1_DataBound" PageSize="50">
                        <FooterStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />
                        <Columns>

                            <asp:TemplateField headertext="[[Agree]]">
                                <ItemTemplate>
                                    <asp:CheckBox ID="ckbDgdApprove" runat="server" />
                                </ItemTemplate>
                            </asp:TemplateField>
                            <asp:TemplateField headertext="[[Reject]]">
                                <ItemTemplate>
                                    <asp:CheckBox ID="ckbDgdReject" runat="server" />
                                </ItemTemplate>
                            </asp:TemplateField>

                        </Columns>

                    </asp:GridView>

 

2.添加JavaScript文件

 

 function ChangeCheckBoxState(id, checkState) {
        var cb = document.getElementById(id);
        if (cb != null)
            cb.checked = checkState;
    }

    function ChangeAllApproveCheckBoxStates(checkState) {
        //更新CheckBoxIDs数组中所有的CheckBox的checkState
        if (ApproveCheckBoxIDs != null) {
            for (var i = 0; i <= ApproveCheckBoxIDs.length; i++)
                ChangeCheckBoxState(ApproveCheckBoxIDs[i], checkState);
        }
        if(checkState && RejectCheckBoxIDs != null) {
            for (var i = 0; i <= RejectCheckBoxIDs.length; i++)
                ChangeCheckBoxState(RejectCheckBoxIDs[i], false);
        }
    }
   
    function ChangeAllRejectCheckBoxStates(checkState) {
        //更新CheckBoxIDs数组中所有的CheckBox的checkState
        if (RejectCheckBoxIDs != null) {
            for (var i = 0; i <= RejectCheckBoxIDs.length; i++)
                ChangeCheckBoxState(RejectCheckBoxIDs[i], checkState);
        }
        if(checkState && ApproveCheckBoxIDs != null) {
            for (var i = 0; i <= ApproveCheckBoxIDs.length; i++)
                ChangeCheckBoxState(ApproveCheckBoxIDs[i], false);
        }
    }

    function ApproveChangeHeaderAsNeeded() {
        //连动更新Header的CheckBox
        if (ApproveCheckBoxIDs != null) {
            // 检查是否所有CheckBox?中
             for (var i = 1; i < ApproveCheckBoxIDs.length; i++) {
                var cb = document.getElementById(ApproveCheckBoxIDs[i]);
                if (cb.checked) {
                    // 有任何一个CheckBox未?中?则Header的CheckBox不?中
                    ChangeCheckBoxState(RejectCheckBoxIDs[0], false);
                    ChangeCheckBoxState(RejectCheckBoxIDs[i], false);
                }
             }
            for (var i = 1; i < ApproveCheckBoxIDs.length; i++) {
                var cb = document.getElementById(ApproveCheckBoxIDs[i]);
                if (!cb.checked) {
                    // 有任何一个CheckBox未?中?则Header的CheckBox不?中
                    ChangeCheckBoxState(ApproveCheckBoxIDs[0], false);
                    return;
                }
            }
            //如果代码??到???则所有CheckBox?中?则Header的CheckBox也?中
            ChangeCheckBoxState(ApproveCheckBoxIDs[0], true);
            ChangeCheckBoxState(RejectCheckBoxIDs[0], false);
        }
    }
   
    function RejectChangeHeaderAsNeeded() {
         //连动更新Header的CheckBox
        if (RejectCheckBoxIDs != null) {
            // 检查是否所有CheckBox?中
             for (var i = 1; i < RejectCheckBoxIDs.length; i++) {
                var cb = document.getElementById(RejectCheckBoxIDs[i]);
                if (cb.checked) {
                    // 有任何一个CheckBox未?中?则Header的CheckBox不?中
                    ChangeCheckBoxState(ApproveCheckBoxIDs[0], false);
                    ChangeCheckBoxState(ApproveCheckBoxIDs[i], false);
                }
             }
            for (var i = 1; i < RejectCheckBoxIDs.length; i++) {
                var cb = document.getElementById(RejectCheckBoxIDs[i]);
                if (!cb.checked) {
                    // 有任何一个CheckBox未?中?则Header的CheckBox不?中
                    ChangeCheckBoxState(RejectCheckBoxIDs[0], false);
                    return;
                }
            }
            //如果代码??到???则所有CheckBox?中?则Header的CheckBox也?中
            ChangeCheckBoxState(RejectCheckBoxIDs[0], true);
            ChangeCheckBoxState(ApproveCheckBoxIDs[0], false);
        }
    }

3.为GridView添加 DataBound事件，实现客户端Header的onclick的方法

 

    #region GridView1_DataBound
    protected void GridView1_DataBound(object sender, EventArgs e)
    {
        //每次数据绑定到GridView????建立CheckBoxIDs数组
        //获得header CheckBox
        //CheckBox cbHeader = GridView1.HeaderRow.FindControl("HeaderLevelApproveCheckBox") as CheckBox;
        //当点击header CheckBox 全?/取消 时???客户端ChangeCheckBoxState函数
        //cbHeader.Attributes.Add("onclick", "ChangeAllCheckBoxStates(this.checked);");
        //添加Header CheckBox's ID 到客户端 CheckBoxIDs 数组
        List<string> ArrayApproveValues = new List<string>();
        List<string> ArrayRejectValues = new List<string>();
        //ArrayValues.Add(string.Concat("'", cbHeader.ClientID, "'"));
        ArrayApproveValues.Add(string.Concat("'", ckbApprove.ClientID, "'"));
        ArrayRejectValues.Add(string.Concat("'", ckbReject.ClientID, "'"));

        foreach (GridViewRow gvr in GridView1.Rows)
        {
            //?取ItemTemplate中CheckBox
            CheckBox ca = gvr.FindControl("ckbDgdApprove") as CheckBox;
            CheckBox cj = gvr.FindControl("ckbDgdReject") as CheckBox;
            //如果Item CheckBox有一?为?中?则Header CheckBox未?中
            ca.Attributes.Add("onclick", "ApproveChangeHeaderAsNeeded();");
            cj.Attributes.Add("onclick", "RejectChangeHeaderAsNeeded();");
            //添加Item CheckBox's ID 到客户端 CheckBoxIDs 数组
            ArrayApproveValues.Add(string.Concat("'", ca.ClientID, "'"));
            ArrayRejectValues.Add(string.Concat("'", cj.ClientID, "'"));
        }
        //?出ArrayValues数组到Literal 控件 (<p><asp:Literal ID="ApproveCheckBoxIDsArray" runat="server"></asp:Literal></p>)
        ApproveCheckBoxIDsArray.Text = "<script type=\"text/javascript\">" + string.Concat("var ApproveCheckBoxIDs = new Array(", string.Join(",", ArrayApproveValues.ToArray()), ");") + "</script>";
        RejectCheckBoxIDsArray.Text = "<script type=\"text/javascript\">" + string.Concat("var RejectCheckBoxIDs = new Array(", string.Join(",", ArrayRejectValues.ToArray()), ");") + "</script>";
    }
    #endregion

 

4.生成测试数据

Code Snippet

1. protected void Page_Load(object sender, EventArgs e)
2. {
3.     if (!IsPostBack)
4.     {
5.         DirectoryInfo dirInfo = new DirectoryInfo(Request.PhysicalApplicationPath);
6.         GridView1.DataSource = dirInfo.GetFiles();
7.         GridView1.DataBind();
8.     }
9. }