gridview checkbox从服务器端和客户端两个方面实现全选和反选

实现 GridView 的全选和反选功能分为服务器端和客户端两个方面。

一、服务器端实现

服务器端实现相对简单，只需要在 GridView 控件上加上一个 CheckBox 控件，然后在 CheckedChanged 事件中修改 GridView 的每一个数据行的 CheckBox 控件状态即可。代码如下：

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False">
    <Columns>
        <asp:TemplateField>
            <HeaderTemplate>
                <asp:CheckBox ID="chkAll" runat="server" OnCheckedChanged="chkAll_CheckedChanged" />
            </HeaderTemplate>
            <ItemTemplate>
                <asp:CheckBox ID="chkSelect" runat="server" />
            </ItemTemplate>
        </asp:TemplateField>
        <asp:BoundField DataField="ID" HeaderText="ID" />
        <asp:BoundField DataField="Name" HeaderText="Name" />
    </Columns>
</asp:GridView>

在后台代码中，首先在 GridView 的 DataBound 事件中获取到 CheckBox 控件对象，然后将其设置为不自动回发（AutoPostBack=false），防止勾选全选 CheckBox 控件时触发页面重新加载，代码如下：

protected void GridView1_DataBound(object sender, EventArgs e)
{
    CheckBox chkAll = GridView1.HeaderRow.FindControl("chkAll") as CheckBox;
    if (chkAll != null)
    {
        chkAll.AutoPostBack = false;
    }
}

然后在全选 CheckBox 控件的 CheckedChanged 事件中遍历 GridView 的每一个数据行，并修改其 CheckBox 控件的选中状态，代码如下：

protected void chkAll_CheckedChanged(object sender, EventArgs e)
{
    CheckBox chkAll = sender as CheckBox;
    if (chkAll != null)
    {
        foreach (GridViewRow row in GridView1.Rows)
        {
            CheckBox chkSelect = row.FindControl("chkSelect") as CheckBox;
            if (chkSelect != null)
            {
                chkSelect.Checked = chkAll.Checked;
            }
        }
    }
}

这样就完成了服务器端的全选和反选功能实现。

二、客户端实现

客户端实现全选和反选功能更加方便和快捷，只需要在页面加载完毕后通过 JavaScript 获取到 CheckBox 控件对象，然后设置其 Checked 属性值即可。代码如下：

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" ClientIDMode="Static">
    <Columns>
        <asp:TemplateField>
            <HeaderTemplate>
                <asp:CheckBox ID="chkAll" runat="server" />
            </HeaderTemplate>
            <ItemTemplate>
                <asp:CheckBox ID="chkSelect" runat="server" />
            </ItemTemplate>
        </asp:TemplateField>
        <asp:BoundField DataField="ID" HeaderText="ID" />
        <asp:BoundField DataField="Name" HeaderText="Name" />
    </Columns>
</asp:GridView>

<script type="text/javascript">
    window.onload = function () {
        var chkAll = document.getElementById("chkAll");
        var chkBoxes = document.getElementsByName("<%=GridView1.ClientID %>chkSelect");

        chkAll.onclick = function () {
            for (var i = 0; i < chkBoxes.length; i++) {
                chkBoxes[i].checked = chkAll.checked;
            }
        };

        for (var i = 0; i < chkBoxes.length; i++) {
            chkBoxes[i].onclick = function () {
                var checkedCount = 0;
                for (var i = 0; i < chkBoxes.length; i++) {
                    if (chkBoxes[i].checked) {
                        checkedCount++;
                    }
                }
                chkAll.checked = (checkedCount == chkBoxes.length);
            };
        }
    };
</script>

以上代码中，我们首先获取到全选 CheckBox 控件以及 GridView 中的每一个 CheckBox 控件数组，然后对全选 CheckBox 控件的 onclick 事件进行绑定，在勾选或取消勾选的同时修改所有 CheckBox 控件的选中状态。另外，还需要对 GridView 中的每一个 CheckBox 控件的 onclick 事件进行绑定，在勾选或取消勾选的同时判断全选 CheckBox 控件是否需要勾选。

客户端实现的优点是可以大大减轻服务器端的压力，同时也可以减少页面的加载时间，提高用户体验。