Check Uncheck all CheckBoxes in GridView using JavaScript

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

The check and uncheck of Checkboxes is controlled from Header Row CheckBox, when Header CheckBox is checked all the CheckBoxes are selected and when unchecked then all the CheckBoxes are unselected 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">

<asp:TemplateField>

<asp:CheckBox ID="chkAll" runat="server" onclick="SelectAll(this)" />

</HeaderTemplate>

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

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

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.

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;