In this article I will explain with an example, how to get selected (checked) CheckBox Row (Cell) values of HTML Table using jQuery.
When the Button is clicked, all the CheckBoxes inside the HTML Table 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 HTML Table and a Button.
<table cellspacing="0" rules="all" border="1" id="Table1" style="border-collapse: collapse;">
<tr>
<th> </th>
<th style="width:80px">Customer Id</th>
<th style="width:120px">Name</th>
<th style="width:120px">Country</th>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td>1</td>
<td>John Hammond</td>
<td>United States</td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td>2</td>
<td>Mudassar Khan</td>
<td>India</td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td>3</td>
<td>Suzanne Mathews</td>
<td>France</td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td>4</td>
<td>Robert Schidner</td>
<td>Russia</td>
</tr>
</table>
<br />
<input id = "btnGet" type="button" value="Get Selected" />
Get selected (checked) CheckBox Row values of HTML Table using jQuery
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 HTML Table 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.
$("#btnGet").click(function () {
var message = "Id Name Country\n";
//Loop through all checked CheckBoxes in GridView.
$("#Table1 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
![Get selected (checked) CheckBox Row values of HTML Table using jQuery]()
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
