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 following HTML Markup consists of:
GridView:- For displaying data.
The GridView consists of one TemplateField column and three BoundField columns.
 

TemplateField

The TemplateField column consists of HeaderTemplate and ItemTemplate which contains of ASP.Net CheckBox controls.
 
Inside the HeaderTemplate CheckBox is assigned with a JavaScript onclick event handler which calls the SelectAll JavaScript function.
And then, ItemTemplate CheckBox is assigned with a JavaScript onclick event handler which calls the SelectOne JavaScript function.
<asp:GridView ID="gvCustomers" 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
 
 

Populating GridView with Dummy Data

Inside the Page Load event handler, the GridView is populated with the dummy data created using Dynamic DataTable.
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");
        gvCustomers.DataSource = dt;
        gvCustomers.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")
        gvCustomers.DataSource = dt
        gvCustomers.DataBind()
    End If
End Sub
 
 

Check and Uncheck Checkboxes using JavaScript

SelectAll

The following JavaScript function is called when the GridView Header Row CheckBox is checked or unchecked.
Using the reference of the Header Row CheckBox, the GridView is referenced.
Note: First parent is Cell, second parent is row and then third parent is GridView.
 
Finally, a FOR 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 control is rendered as HTML Table in browser.
 

SelectOne

The following JavaScript function is called when the GridView Data Row CheckBox is checked or unchecked.
Using the reference of the Data Row CheckBox, the GridView is referenced and then the HeaderRow CheckBox is referenced from the first Cell.
A Boolean variable named checked is created and it is set to TRUE.
A FOR loop is executed over the CheckBoxes of the GridView and if a CheckBox is found unchecked then the variable checked is set to FALSE.
Finally, the value of the checked variable is used to check or uncheck the Header Row CheckBox.
<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;
        }
    }
 
    function SelectOne(chk) {
        //Get the reference of GridView.
        var grid = chk.parentNode.parentNode.parentNode;
 
        //Reference the Header CheckBox.
        var headerCheckBox = grid.rows[0].cells[0].getElementsByTagName("input")[0];
 
        var checked = true;
 
        //Loop through all GridView Rows.
        for (var i = 1; i < grid.rows.length; i++) {
            //Reference the CheckBox.
            var checkBox = grid.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.
Microsoft Edge  FireFox  Chrome  Safari  Opera
* All browser logos displayed above are property of their respective owners.
 
 

Demo

View Demo
 
 

Downloads

Download Code