How to achieve Single Select option in a html table using check box control and jscript

the below sample will help in constructing a html table with a check box column and the script to achieve single select of the check box button among all the datarows of the table.

<!DOCTYPEhtml>
<html>
<head>
<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js”&gt;
<script type=”text/javascript”>
$(document).ready(function () {
$(“input[name=chkName]”).click(function (e) {
var selectedCheckbox = $(e.target);
$(e.target).closest(‘table’).find(‘input[type=checkbox]’).not(e.target).removeAttr(“checked”);
})});
</script>
</head>
<body>
<div id=”Container”>
<table style=”text-align: left;”id=”myTable”>
<colgroup id=”myColumns”>
<col width=”10%”/>
<col width=”45%”/>
</colgroup>
<tr>
<th style=”text-align: left;”>Select</th>
<th style=”text-align: left;”>Name</th>
</tr>
<!– the below script with add 3 rows to the table with the 1st row indicating the check box.–>
<tr>
<td><input name=’chkName’ type=’checkbox’></td>
<td>SAMUEL</td>
</tr>
<tr>
<td><input name=’chkName’ type=’checkbox’></td>
<td>RAVI</td>
</tr>
<tr>
<td><input name=’chkName’ type=’checkbox’></td>

<td>STAR</td>
</tr>
<tr>
<td><input name=’chkName’ type=’checkbox’></td>
<td>CRAIG</td>
</tr>
</table>
</div>
</body>
</html>

–Note please take care of the quotations before executing the sample

Advertisements
This entry was posted in HTML, java script, JQuery and tagged , , . Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s