In this article I will explain with an example, how to implement Check All CheckBox functionality in ASP.Net GridView control using JavaScript.
 
 
HTML Markup
The HTML Markup consists of an ASP.Net GridView containing one TemplateField column and three BoundField columns.
The TemplateField column consists of a HeaderTemplate with a CheckBox (Header Row CheckBox) and an ItemTemplate with CheckBox (Row CheckBox).
The Header Row CheckBox and the Row CheckBoxes have been assigned with a JavaScript OnClick event handler.
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false">
    <Columns>
        <asp:TemplateField>
            <HeaderTemplate>
                <asp:CheckBox ID="chkAll" runat="server" onclick="SelectAll(this)" />
            </HeaderTemplate>
            <ItemTemplate>
                <asp:CheckBox ID="chk" runat="server" onclick="SelectOne(this)" />
            </ItemTemplate>
        </asp:TemplateField>
        <asp:BoundField DataField="Id" HeaderText="Customer Id" />
        <asp:BoundField DataField="Name" HeaderText="Name" />
        <asp:BoundField DataField="Country" HeaderText="Country" />
    </Columns>
</asp:GridView>
 
 
Namespaces
You will need to import the following namespace.
C#
using System.Data;
 
VB.Net
Imports System.Data
 
 
Binding the ASP.Net GridView control
The GridView is populated with a dynamic DataTable with some dummy data inside the Page Load event.
Note: You can learn more about this dynamic DataTable in my article Create DataTable dynamically and bind to GridView in ASP.Net.
 
C#
protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        DataTable dt = new DataTable();
        dt.Columns.AddRange(new DataColumn[3] { new DataColumn("Id"), new DataColumn("Name"), new DataColumn("Country")});
        dt.Rows.Add(1, "John Hammond", "United States");
        dt.Rows.Add(2, "Mudassar Khan", "India");
        dt.Rows.Add(3, "Suzanne Mathews", "France");
        dt.Rows.Add(4, "Robert Schidner", "Russia");
        GridView1.DataSource = dt;
        GridView1.DataBind();
    }
}
 
VB.Net
Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
    If Not Me.IsPostBack Then
        Dim dt As New DataTable()
        dt.Columns.AddRange(New DataColumn(2) {New DataColumn("Id"), New DataColumn("Name"), New DataColumn("Country")})
        dt.Rows.Add(1, "John Hammond", "United States")
        dt.Rows.Add(2, "Mudassar Khan", "India")
        dt.Rows.Add(3, "Suzanne Mathews", "France")
        dt.Rows.Add(4, "Robert Schidner", "Russia")
        GridView1.DataSource = dt
        GridView1.DataBind()
    End If
End Sub
 
 
Check Uncheck all CheckBoxes in GridView when Header CheckBox is checked
The following function is called when the GridView Header Row CheckBox is checked or unchecked.
Inside this JavaScript function, first the reference of the Header Row CheckBox is received as parameter.
Then with the help of JavaScript parentNode property, the GridView is referenced.
Note: First parent is Cell, second parent is row and then third parent is GridView.
 
Finally, a loop is executed over the GridView Rows and each CheckBox is checked or unchecked based on state of Header Row CheckBox.
Note: ASP.Net GridView is rendered as HTML Table in browser.
 
<script type="text/javascript">
    function SelectAll(headerCheckBox) {
        //Get the reference of GridView.
        var GridView = headerCheckBox.parentNode.parentNode.parentNode;
 
        //Loop through all GridView Rows except first row.
        for (var i = 1; i < GridView.rows.length; i++) {
            //Reference the CheckBox.
            var checkBox = GridView.rows[i].cells[0].getElementsByTagName("input")[0];
            checkBox.checked = headerCheckBox.checked;
        }
    }
</script>
 
 
When the Row checkboxes are checked then check the Header Row CheckBox
The following function is called when the GridView Row checkbox is checked.
Inside this JavaScript function, first the reference of the GridView Row CheckBox is received as parameter.
Then with the help of JavaScipt parentNode property, the GridView is referenced and then the Header Row CheckBox is referenced.
Finally, a loop is executed over the GridView Rows and each CheckBox is verified whether checked or unchecked if all Row CheckBoxes are checked then Header Row CheckBox is checked.
<script type="text/javascript">
    function SelectOne(chk) {
        //Get the reference of GridView.
        var GridView = chk.parentNode.parentNode.parentNode;
 
        //Reference the Header CheckBox.
        var headerCheckBox = GridView.rows[0].cells[0].getElementsByTagName("input")[0];;
 
        var checked = true;
 
        //Loop through all GridView Rows.
        for (var i = 1; i < GridView.rows.length; i++) {
            //Reference the CheckBox.
            var checkBox = GridView.rows[i].cells[0].getElementsByTagName("input")[0];
            if (!checkBox.checked) {
                checked = false;
                break;
            }
        }
 
        headerCheckBox.checked = checked;
    };
</script>
 
 
Screenshot
Implement check all checkbox functionality in ASP.Net GridView control using JavaScript
 
 
Browser Compatibility

The above code has been tested in the following browsers.

Internet Explorer  FireFox  Chrome  Safari  Opera 

* All browser logos displayed above are property of their respective owners.

 
 
Demo
 
 
Downloads