Get selected checked CheckBox Row values of GridView using JavaScript in ASPNet

In this article I will explain with an example, how to get selected (checked) CheckBox Row (Cell) values of GridView using JavaScript in ASP.Net.

When the Button is clicked, all the CheckBoxes inside the GridView will be referenced and then the Row (Cell) values of selected (checked) CheckBoxes will be extracted and displayed using JavaScript Alert Message Box.

HTML Markup

The following HTML Markup consists of an ASP.Net GridView and a Button. The Button has been assigned an OnClientClick event which calls a JavaScript function.

<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" ItemStyle-Width="80" />

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

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

</Columns>

</asp:GridView>

<br />

<asp:Button Text="Get Selected" runat="server" OnClientClick="return GetSelected()" />

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 get selected (checked) CheckBox Row values of GridView in ASP.Net

Inside the GetSelected JavaScript function, first the GridView is referenced and then all the CheckBoxes inside the GridView are referenced.

Then a loop is executed over the CheckBoxes and if the CheckBox is checked, the values of Cells of the Row are extracted and displayed using JavaScript Alert Message Box.

function GetSelected() {

//Reference the GridView.

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

//Reference the CheckBoxes in GridView.

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

var message = "Id Name Country\n";

//Loop through the CheckBoxes.

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

if (checkBoxes[i].checked) {

var row = checkBoxes[i].parentNode.parentNode;

message += row.cells[1].innerHTML;

message += " " + row.cells[2].innerHTML;