In this article I will explain with an example, how to check or uncheck all CheckBoxes in GridView using
JavaScript in ASP.Net.
HTML Markup
The HTML Markup consists of:
GridView – For displaying data.
Columns
GridView consists of a TemplateField column and three BoundField columns.
TemplateField – The TemplateField column consists of HeaderTemplate and ItemTemplate.
HeaderTemplate – It consists of an ASP.Net CheckBox which has been assigned with a
JavaScript onclick function.
ItemTemplate – It consists of an ASP.Net CheckBox which has been assigned with a
JavaScript onclick function.
Events
The GridView has been assigned with the following event handler i.e. OnRowDataBound.
<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#
VB.Net
Populating the GridView
Inside the Page Load event handler, GridView is populated with a dynamic DataTable with some dummy data.
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
When the
Header Row CheckBox inside GridView is checked or unchecked, the
SelectAll JavaScript function gets called.
Inside this
SelectAll 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 third parent is the GridView.
Finally, a FOR loop is executed over the GridView Rows and each CheckBox inside it is checked or unchecked based on state of Header Row CheckBox.
If the Header Row CheckBox is checked then all CheckBox of GridView Row is checked and if Header Row CheckBox is unchecked then all the GridView Row CheckBox is unchecked.
<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];
//If CheckBox is checked, change background color the GridView Row.
if (headerCheckBox.checked) {
checkBox.checked = true;
} else {
checkBox.checked = false;
}
}
}
</script>
Maintaining the state of Header Row CheckBox based on state of GridView Row CheckBoxes
When the CheckBox in GridView Row is checked or unchecked, the
SelectOne JavaScript function gets called.
Inside this
SelectOne JavaScript function, first the reference of the GridView Row CheckBox is received as parameter.
Then, with the help of
JavaScript parentNode property, first the GridView Row and then the GridView is referenced.
And then, the Header Row CheckBox is also referenced after referencing the first row of the GridView.
Finally, a FOR loop is executed over the GridView Rows and each CheckBox is verified whether checked or unchecked, if all CheckBoxes inside GridView row are checked then Header Row CheckBox is also checked.
<script type="text/javascript">
function SelectOne(chk) {
//Reference the GridView Row.
var row = chk.parentNode.parentNode;
//Get the reference of GridView.
var GridView = row.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
![Check Uncheck all CheckBoxes in GridView using JavaScript]()
Browser Compatibility
* All browser logos displayed above are property of their respective owners.
Demo
Downloads
