In this article I will explain how to implement check uncheck all (select unselect all) functionality for CheckBox in GridView ItemTemplate and HeaderTemplate using jQuery and JavaScript.
The jQuery function that is developed works for single as well as multiple GridViews.
 
 
HTML Markup
The HTML Markup consists of three GridViews. I have made use of three GridViews in order to show how we can use the same Check all CheckBox script for multiple GridViews
<asp:GridView ID="GridView1" runat="server" HeaderStyle-BackColor="#3AC0F2"
    HeaderStyle-ForeColor="White" AutoGenerateColumns="false">
    <Columns>
        <asp:TemplateField>
            <HeaderTemplate>
                <asp:CheckBox ID="chkHeader" runat="server" />
            </HeaderTemplate>
            <ItemTemplate>
                <asp:CheckBox ID="chkRow" runat="server" />
            </ItemTemplate>
        </asp:TemplateField>
        <asp:BoundField DataField="Name" HeaderText="Name" ItemStyle-Width="150" />
        <asp:BoundField DataField="Country" HeaderText="Country" ItemStyle-Width="150" />
    </Columns>
</asp:GridView>
<hr />
<asp:GridView ID="GridView2" runat="server" HeaderStyle-BackColor="#3AC0F2"
    HeaderStyle-ForeColor="White" AutoGenerateColumns="false">
    <Columns>
        <asp:TemplateField>
            <HeaderTemplate>
                <asp:CheckBox ID="chkHeader" runat="server" />
            </HeaderTemplate>
            <ItemTemplate>
                <asp:CheckBox ID="chkRow" runat="server" />
            </ItemTemplate>
        </asp:TemplateField>
        <asp:BoundField DataField="Name" HeaderText="Name" ItemStyle-Width="150" />
        <asp:BoundField DataField="Country" HeaderText="Country" ItemStyle-Width="150" />
    </Columns>
</asp:GridView>
<hr />
<asp:GridView ID="GridView3" runat="server" HeaderStyle-BackColor="#3AC0F2"
    HeaderStyle-ForeColor="White" AutoGenerateColumns="false">
    <Columns>
        <asp:TemplateField>
            <HeaderTemplate>
                <asp:CheckBox ID="chkHeader" runat="server" />
            </HeaderTemplate>
            <ItemTemplate>
                <asp:CheckBox ID="chkRow" runat="server" />
            </ItemTemplate>
        </asp:TemplateField>
        <asp:BoundField DataField="Name" HeaderText="Name" ItemStyle-Width="150"/>
        <asp:BoundField DataField="Country" HeaderText="Country" ItemStyle-Width="150"/>
    </Columns>
</asp:GridView>
 
Note: In all the three GridViews the Header CheckBox ID as chkHeader and Row CheckBox ID as chkRow, this important in order to make the script work. Thus in order to use the script make sure you follow the same IDs for the CheckBoxes.
 
 
Namespaces
You will need to import the following namespaces.
using System.Data;
 
 
Binding the GridView
I have made use of DataTable with some dummy values for this article.
protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        DataTable dt = new DataTable();
        dt.Columns.AddRange(new DataColumn[2] { new DataColumn("Name"), new DataColumn("Country") });
        dt.Rows.Add("John Hammond", "Canada");
        dt.Rows.Add("Rick Stewards", "United States");
        dt.Rows.Add("Huang He", "China");
        dt.Rows.Add("Mudassar Khan", "India");
        GridView1.DataSource = dt;
        GridView1.DataBind();
        dt.Rows.Clear();
        dt.Rows.Add("Wills Smith", "United States");
        dt.Rows.Add("Raj Shekaran", "India");
        dt.Rows.Add("Rob Mills", "Russia");
        GridView2.DataSource = dt;
        GridView2.DataBind();
        dt.Rows.Clear();
        dt.Rows.Add("Jason Mathews", "Canada");
        dt.Rows.Add("Asim Iqbal", "UAE");
        dt.Rows.Add("Bravo Samuels", "Brazil");
        dt.Rows.Add("Walter Slater", "Mexico");
        GridView3.DataSource = dt;
        GridView3.DataBind();
    }
}
 
 
Check All (Select All) CheckBox in GridView jQuery Script
Below is the script that is used to implement the Check All or Select All CheckBox functionality in the GridView. There are two jQuery click event handlers, first for the Header CheckBox chkHeader and the second for the Row CheckBox chkRow.
The Header CheckBox event handlers checks (selects) or unchecks (unselects) all Row CheckBoxes when the Header CheckBox is checked (selected) or uncheck (unselected).
The Row CheckBox event handler has rather more work to do, when a Row CheckBox is checked (selected) then it unchecks (unselects) the Header CheckBox and when a Row CheckBox is checked (selected) then first it makes sure that all Row CheckBoxes are checked (selected) if Yes then it checks (selects) Header CheckBox else not.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
    $("[id*=chkHeader]").live("click", function () {
        var chkHeader = $(this);
        var grid = $(this).closest("table");
        $("input[type=checkbox]", grid).each(function () {
            if (chkHeader.is(":checked")) {
                $(this).attr("checked", "checked");
                $("td", $(this).closest("tr")).addClass("selected");
            } else {
                $(this).removeAttr("checked");
                $("td", $(this).closest("tr")).removeClass("selected");
            }
        });
    });
    $("[id*=chkRow]").live("click", function () {
        var grid = $(this).closest("table");
        var chkHeader = $("[id*=chkHeader]", grid);
        if (!$(this).is(":checked")) {
            $("td", $(this).closest("tr")).removeClass("selected");
            chkHeader.removeAttr("checked");
        } else {
            $("td", $(this).closest("tr")).addClass("selected");
            if ($("[id*=chkRow]", grid).length == $("[id*=chkRow]:checked", grid).length) {
                chkHeader.attr("checked", "checked");
            }
        }
    });
</script>
 
 
CSS Classes used to style the GridView
The follow CSS style class is used by the jQuery Script to Highlight the checked or selected row.
<style type="text/css">
    body
    {
        font-family: Arial;
        font-size: 10pt;
    }
    .selected
    {
        background-color: #A1DCF2;
    }
</style>
 
check uncheck all checkboxes in an asp.net gridview using jquery
 
 
Demo
 
Downloads