In this article I will explain with an example, how to check or uncheck all CheckBoxes in GridView using jQuery in ASP.Net.
 
 

HTML Markup

The HTML Markup consists of following control:
GridView:- For displaying data.

Columns

The GridView consists of one TemplateField column and three BoundField columns.
 

TemplateField

The TemplateField column consists of HeaderTemplate and ItemTemplate and both consists of an ASP.Net CheckBox control.
<asp:GridView ID="gvCustomers" runat="server" AutoGenerateColumns="false">
    <Columns>
        <asp:TemplateField>
            <HeaderTemplate>
                <asp:CheckBox ID="chkAll" runat="server" />
            </HeaderTemplate>
            <ItemTemplate>
                <asp:CheckBox ID="chk" runat="server" />
            </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 using C# and VB.Net

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. 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 Uncheck all CheckBoxes in GridView when Header CheckBox is checked

Inside the HTML Markup, first the following script file is inherited.
1. jquery.min.js
 
The GridView Header Row CheckBox has been assigned with a jQuery click event handler.
Inside this click event handler, first the Header Row CheckBox is referenced.
Finally, a FOR EACH loop is executed over the GridView Rows and each CheckBox is checked or unchecked based on state of Header Row CheckBox.
If Header Row CheckBox is checked, all the CheckBoxes of GridView is checked and if Header Row CheckBox is unchecked then all the GridView Row CheckBoxes are unchecked.
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script type="text/javascript">
    $("[id*= gvCustomers] [id*= chkAll]").on("click", function () {
        //Get the reference of Header CheckBox.
        var chkAll = $(this);
 
        //Loop through all GridView CheckBoxes except Header CheckBox.
        $("[id*= gvCustomers] [id*= chk]").not("[id*= chkAll]").each(function () {
            $(this)[0].checked = chkAll[0].checked;
        });
    });
</script>
 
 

Maintaining the state of Header Row CheckBox based on state of GridView Row CheckBoxes

Inside the HTML Markup, first the following script file is inherited.
1. jquery.min.js
 
Each GridView Row CheckBox has been assigned with a jQuery click event handler.
Inside this click event handler, first the Header Row CheckBox is referenced.
Finally, a FOR EACH 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 and if any of Row CheckBox is unchecked then the Header Row CheckBox will be unchecked.
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
 <script type="text/javascript">
    $("[id*= gvCustomers] [id*= chk]").on("click", function () {
        //Get the reference of Header CheckBox.
        var chkAll = $("[id*= gvCustomers] [id*= chkAll]");
 
        //Set Header CheckBox checked to true.
        chkAll[0].checked = true;
 
        //Loop through all GridView CheckBoxes except Header CheckBox.
        $("[id*= gvCustomers] [id*= chk]").not("[id*= chkAll]").each(function () {
            if (!$(this).is(":checked")) {
                chkAll[0].checked = false;
                return;
            }
        });
    });
</script>
 
 

Screenshot

Check Uncheck all CheckBoxes in ASP.Net GridView using jQuery
 
 

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