In this article I will explain with an example, how to get selected (checked) CheckBox Row (Cell) values of GridView using jQuery 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.
<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>
<br />
<asp:Button ID = "btnGet" Text="Get Selected" runat="server" />
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
Get selected (checked) CheckBox Row values of GridView using jQuery in ASP.Net
Inside the jQuery document ready event handler, the Button has been assigned a jQuery Click event handler.
When the Button is clicked, a jQuery each loop is executed over all the selected (checked) CheckBoxes inside the GridView and the values of Cells of the Row are extracted and displayed using JavaScript Alert Message Box.
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
//Assign Click event to Button.
$("[id*=btnGet]").click(function () {
var message = "Id Name Country\n";
//Loop through all checked CheckBoxes in GridView.
$("[id*=GridView] input[type=checkbox]:checked").each(function () {
var row = $(this).closest("tr")[0];
message += row.cells[1].innerHTML;
message += " " + row.cells[2].innerHTML;
message += " " + row.cells[3].innerHTML;
message += "\n";
});
//Display selected Row data in Alert Box.
alert(message);
return false;
});
});
</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