Select Check one single CheckBox in ASPNet GridView using JavaScript

In this article I will explain with an example, how to select (check) one (single) CheckBox in ASP.Net GridView using JavaScript.

By default, multiple CheckBoxes in GridView are meant for multiple selection, thus in order to make it work as single selection i.e. only one (single) CheckBox can be selected at a time, JavaScript needs to be used to achieve the same.

HTML Markup

The following HTML Markup consists of an ASP.Net GridView with a TemplateField column containing a CheckBox and three BoundField columns.

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

<asp:TemplateField>

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

</ItemTemplate>

</asp:TemplateField>

<asp:BoundField DataField="Id" HeaderText="Customer Id" HeaderStyle-Width="80" />

<asp:BoundField DataField="Name" HeaderText="Name" HeaderStyle-Width="120" />

<asp:BoundField DataField="Country" HeaderText="Country" HeaderStyle-Width="120" />

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

JavaScript function to select one (single) CheckBox from multiple CheckBoxes in GridView

Inside the JavaScript window onload event handler, first the GridView is referenced and then all the CheckBoxes inside it are referenced.

Then a loop is executed over the CheckBoxes and Click event handler is attached.

Inside the Click event handler, a check is made to make sure whether the clicked CheckBox is checked and if it is checked then all the other CheckBoxes are unchecked.

window.onload = function () {

var grid = document.getElementById("<%=GridView1.ClientID %>");

var chks = grid.getElementsByTagName("INPUT");

for (var i = 0; i < chks.length; i++) {

if (chks[i].type == "checkbox") {

chks[i].onclick = function () {

for (var i = 0; i < chks.length; i++) {

if (chks[i] != this && this.checked) {

chks[i].checked = false;

}

};

}