Jquery：选择表行时选择一个单选按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7067136/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Jquery: Select a radio button when table row is selected
提问by radi8
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>
<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>
回答by Mrchief
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/
这是一个工作小提琴：http: //jsfiddle.net/mrchief/eFnL7/1/
Edit:For better (by how much??) performance, use input[type=radio]selector : http://jsfiddle.net/mrchief/eFnL7/2/
编辑：为了更好（多少？？）性能，请使用input[type=radio]选择器：http: //jsfiddle.net/mrchief/eFnL7/2/
回答by MikeBaker
$('#tableSelect tr').click(function(){
$(this).find('input[type=radio]').prop('checked', true);
});
Fiddle: http://jsfiddle.net/8PzX2/
小提琴：http: //jsfiddle.net/8PzX2/
Documentation:
文档：
回答by Joseph Silber
$('table tr').click(function(){
$(this).find('input[type=radio]').prop('checked', true);
});
回答by Matt Ball
$(function ()
{
$('#tableSelect').delegate('tbody > tr', 'click', function ()
{
$(this).find('input[name="UserSelected"]').prop('checked', true);
});
});
回答by ShankarSangoli
You can use delegateto do this which will attach the event handler only to the table element and will work for each tr
您可以使用delegate此方法将事件处理程序仅附加到表格元素，并将适用于每个tr
$(function (){
$('#tableSelect').delegate('tbody > tr', 'click', function(){
$(this).find('input[name="UserSelected"]').attr('checked', true);
});
});
