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">
<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
Binding the ASP.Net GridView control
The GridView is populated with a dynamic DataTable with some dummy data inside the Page Load event.
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");
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.
<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;
}
}
</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.
<script type="text/javascript">
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;
break;
}
}
headerCheckBox.checked = checked;
};
</script>
Screenshot
Browser Compatibility
The above code has been tested in the following browsers.
* All browser logos displayed above are property of their respective owners.
Demo
Downloads