In this article I will explain with an example, how to get RowIndex when CheckBox in GridView Row is Checked (Clicked) using JavaScript.
All the CheckBox inside the GridView will be assigned a Click event handler using JavaScript.
When the CheckBox inside the GridView Row is Checked (Clicked), the GridView Row will be referenced and then the RowIndex and the Row (Cell) values will be extracted and displayed using JavaScript Alert Message Box.
 
 
HTML Markup
The following HTML Markup consists of an ASP.Net GridView.
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false">
    <Columns>
        <asp:TemplateField>
            <ItemTemplate>
                <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>
 
 
Namespaces
You will need to import the following namespace.
C#
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.
 
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
 
 
Getting RowIndex when CheckBox in GridView Row is Checked using JavaScript
Inside the Window Onload event handler, first the GridView is referenced and then all the CheckBoxes inside the GridView are referenced.
Then a loop is executed over the CheckBoxes and each CheckBox is assigned a JavaScript Click event handler.
When the CheckBox inside the GridView Row is Checked (Clicked), the GridView Row will be referenced and then the RowIndex and the Row (Cell) values will be extracted and displayed using JavaScript Alert Message Box.
<script type="text/javascript">
window.onload = function () {
    //Reference the GridView.
    var grid = document.getElementById("<%=GridView1.ClientID%>");
 
    //Reference the CheckBoxes in GridView.
    var checkBoxes = grid.getElementsByTagName("INPUT");
 
    //Loop through the CheckBoxes.
    for (var i = 0; i < checkBoxes.length; i++) {
        if (checkBoxes[i].type == "checkbox") {
                   
            //Assign Click event handler to CheckBox.
            checkBoxes[i].onclick = function () {
                if (this.checked) {
 
                    //Reference the Parent Row containing the CheckBox.
                    var row = this.parentNode.parentNode;
 
                    //Display the Row Index and contents of Cells of the Row.
                    var message = "Index Id Name                  Country\n";
                    message += row.rowIndex;
                    message += "        " + row.cells[1].innerHTML;
                    message += "   " + row.cells[2].innerHTML;
                    message += "   " + row.cells[3].innerHTML;
                    message += "\n";
                    alert(message);
                }
            };
        }
    }
};
</script>
 
 
Screenshot
Get RowIndex when CheckBox in GridView Row is Checked (Clicked) using JavaScript
 
 
Browser Compatibility

The above code has been tested in the following browsers.

Internet Explorer  FireFox  Chrome  Safari  Opera 

* All browser logos displayed above are property of their respective owners.

 
 
Demo
 
 
Downloads
Download Code