Check Uncheck all CheckBoxes in ASPNet GridView using jQuery

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

The Header Row CheckBox controls the state of the Row CheckBoxes, when Header CheckBox is checked all the CheckBoxes are selected and when unchecked then all the CheckBoxes are unselected using jQuery.

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).

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false">

<asp:TemplateField>

<asp:CheckBox ID="chkAll" runat="server" />

</HeaderTemplate>

<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.

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.

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 GridView Header Row CheckBox has been assigned with a jQuery Click event handler.

Inside this event handler, first the Header Row CheckBox is referenced.

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.

$("[id*=GridView1] [id*=chkAll]").on("click", function () {

//Get the reference of Header CheckBox.

var chkAll = $(this);

//Loop through all GridView CheckBoxes except Header CheckBox.

$("[id*=GridView1] [id*=chk]").not("[id*=chkAll]").each(function () {

$(this)[0].checked = chkAll[0].checked;

});

</script>

When the Row CheckBoxes are checked then check the Header Row CheckBox

Each GridView Row CheckBox has been assigned with a jQuery Click event handler.

Inside this event handler, first 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 and even if one Row CheckBox is unchecked then the Header Row CheckBox will be unchecked.