Jquery: Select a radio button when table row is selected
I need to have a radio button selected when a user clicks anywhere in a table row. I have been toying with some options but cannot get anything to work.
Any help is appreciated.
Here is a sample table:
<table id="tableSelect" class="rowclick" border=1>
<caption align="top">User Management</caption> <thead>
<tr id='head'>
<th scope="Row">Select</th>
<th>User Name</th>
<th>Greeting Name</th>
<th>Dept</th>
<th>User Name</th>
<th>Access Level</th>
</tr>
</thead>
<tbody>
<tr id='one'>
<th scope="col">
<input name="UserSelected" id="userSelected_1" type="radio" value="1">
</th>
<th scope="col"> Richard Rice</th&开发者_开发问答gt;
<td>Rick</td>
<td>IT</td>
<td>rick</td>
<td>
<select class="Role" id="Role" name="userAccessLevel">
<option value="-2">Access Denied</option>
<option value="-1">Suspended</option>
<option value="1">Shipping User</option>
<option value="2">Administrator</option>
<option value="3" selected>Super Administrator</option>
<option value="5">Accounting</option>
<option value="6">Report Viewer</option>
</select>
</td>
</tr>
<tr id='two'>
<th scope="col">
<input name="UserSelected" id="userSelected_2" type="radio" value="3">
</th>
<th scope="col"> Mickey Hockenberry</th>
<td>Mickey</td>
<td>Purchasing</td>
<td>mickeyh</td>
<td>
<select class="Role" id="Role" name="userAccessLevel">
<option value="-2">Access Denied</option>
<option value="-1">Suspended</option>
<option value="1">Shipping User</option>
<option value="2" selected>Administrator</option>
<option value="3">Super Administrator</option>
<option value="5">Accounting</option>
<option value="6">Report Viewer</option>
</select>
</td>
</tr>
<tr id='three'>
<th scope="col">
<input name="UserSelected" id="userSelected_3" type="radio" value="41">
</th>
<th scope="col"> Michael Lynch</th>
<td>Mike</td>
<td>Shipping</td>
<td>mjl</td>
<td>
<select class="Role" id="Role" name="userAccessLevel">
<option value="-2">Access Denied</option>
<option value="-1">Suspended</option>
<option value="1">Shipping User</option>
<option value="2" selected>Administrator</option>
<option value="3">Super Administrator</option>
<option value="5">Accounting</option>
<option value="6">Report Viewer</option>
</select>
</td>
</tr>
</tbody>
Use this:
$('#tableSelect tr').click(function() {
$(this).find('th input:radio').prop('checked', true);
})
Here's a working fiddle: http://jsfiddle.net/mrchief/eFnL7/1/
Edit: For better (by how much??) performance, use input[type=radio]
selector : http://jsfiddle.net/mrchief/eFnL7/2/
$('#tableSelect tr').click(function(){
$(this).find('input[type=radio]').prop('checked', true);
});
Fiddle: http://jsfiddle.net/8PzX2/
Documentation:
http://api.jquery.com/click/
http://api.jquery.com/prop/
$('table tr').click(function(){
$(this).find('input[type=radio]').prop('checked', true);
});
$(function ()
{
$('#tableSelect').delegate('tbody > tr', 'click', function ()
{
$(this).find('input[name="UserSelected"]').prop('checked', true);
});
});
You can use delegate
to do this which will attach the event handler only to the table element and will work for each tr
$(function (){
$('#tableSelect').delegate('tbody > tr', 'click', function(){
$(this).find('input[name="UserSelected"]').attr('checked', true);
});
});
精彩评论