GridView checkbox全选服务器端和客户端实现

GridView 中的checkbox的全选和反选在很多的地方都是要求实现的，所以下面就从服务器端和客户端两个方面实现了checkbox的选择。

1.服务器端：

html代码如下：

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" 
            DataKeyNames="ID" DataSourceID="SqlDataSource1">
            <Columns>
                <asp:TemplateField>
                    <HeaderTemplate>
                        <asp:CheckBox ID="CheckAll" runat="server" OnCheckedChanged="CheckAll_CheckedChanged" AutoPostBack="true" />
                    </HeaderTemplate>
                    <ItemTemplate>
                        <asp:CheckBox ID="CheckBox1" runat="server" AutoPostBack="true" OnCheckedChanged="CheckBox1_CheckedChanged" />
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:BoundField DataField="ID" HeaderText="ID" InsertVisible="False" 
                    ReadOnly="True" SortExpression="ID" />
                <asp:BoundField DataField="num" HeaderText="num" SortExpression="num" />
            </Columns>
        </asp:GridView>
其中关于数据的获取不是重点，所以就选择了使用sqldatasource控件来实现数据的获取。 GridView中使用了BoundField绑定了ID,num这两个数据表的字段。在上面的HTML代码中，使用了模板列

<asp:TemplateField>
                    <HeaderTemplate>
                        <asp:CheckBox ID="CheckAll" runat="server" OnCheckedChanged="CheckAll_CheckedChanged" AutoPostBack="true" />
                    </HeaderTemplate>
                    <ItemTemplate>
                        <asp:CheckBox ID="CheckBox1" runat="server" AutoPostBack="true" OnCheckedChanged="CheckBox1_CheckedChanged" />
                    </ItemTemplate>
                </asp:TemplateField>

header部分是全选的checkbox，item的部分是单个的checkbox部分。 (请注意AutoPostBack要设置为true，要不然无法触动服务器端的代码)

 

具体的后台的代码：

protected void CheckAll_CheckedChanged(object sender,EventArgs e)
        {
            CheckBox ck = sender as CheckBox;
           
            if (ck != null)
            {
                System.Web.UI.WebControls.GridView g = ck.NamingContainer.NamingContainer as System.Web.UI.WebControls.GridView;
                for (Int32 i = 0; i < g.Rows.Count; i++)
                {
                    (g.Rows[i].FindControl("CheckBox1") as CheckBox).Checked = ck.Checked;
                }
            }
        }
        protected void CheckBox1_CheckedChanged(object sender,EventArgs e)
        {
            var count = 0;
            CheckBox ck = sender as CheckBox;
            if (ck != null)
            {
                System.Web.UI.WebControls.GridView g = ck.NamingContainer.NamingContainer as System.Web.UI.WebControls.GridView;
                for (Int32 i = 0; i < g.Rows.Count; i++)
                {
                    if ((g.Rows[i].FindControl("CheckBox1") as CheckBox).Checked)
                    {
                        count++;
                    }
                }
                (g.HeaderRow.FindControl("CheckAll") as CheckBox).Checked =count==g.Rows.Count;
            }
        }

运行页面以后，可以看到点击全选的checkbox,可以选择全部。取消了全选的checkbox，那所以的checkbox也取消选中。如果单个的checkbox全选中一个，那全选的checkbox也选中。如果有一个单个的checkbox没有选中，那全选的checkbox也不选中。

下面来说说客户端的实现:

html代码部分，请去除掉两个checkbox的OnCheckedChanged和AutoPostBack。其他的不变。

JS代码部分：

    <script type="text/javascript">
        $(function() {
            $("#GridView1 :checkbox").eq(0).click(function() {
                if ($(this).is(":checked")) {
                    $(this).parent().parent().nextAll().find(":checkbox").attr("checked", "checked");
                }
                else {
                    $(this).parent().parent().nextAll().find(":checkbox").removeAttr("checked");
                }
            });
            $("#GridView1 :checkbox").not($("#GridView1 :checkbox:first")).click(function() {
                if ($(this).is(":checked")) {
                    if ($("#GridView1 :checked").length == $("#GridView1 :checkbox").length - 1) {
                        $("#GridView1 :checkbox").eq(0).attr("checked", "checked");
                    }
                }
                else {
                    $("#GridView1 :checkbox").eq(0).removeAttr("checked");
                }
            });
        });
    </script>