Jquery:选择表行时选择单选按钮

Jquery:选择表行时选择单选按钮,jquery,Jquery,当用户单击表行中的任意位置时,我需要选择一个单选按钮。我一直在玩弄一些选择,但什么都做不到 感谢您的帮助 下面是一个示例表: <table id="tableSelect" class="rowclick" border=1> <caption align="top">User Management</caption> <thead> <tr id='head'> <th scope="Row">Select<

当用户单击表行中的任意位置时,我需要选择一个单选按钮。我一直在玩弄一些选择,但什么都做不到

感谢您的帮助

下面是一个示例表:

<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>

用户管理
挑选
用户名
问候语姓名
部
用户名
访问级别
理查德·赖斯
瑞克
信息技术
瑞克
拒绝访问
暂停的
运输用户
管理员
超级管理员
会计
报表查看器
米奇·霍肯贝里
米奇
采购
米奇
拒绝访问
暂停的
运输用户
管理员
超级管理员
会计
报表查看器
林奇
迈克
航运
美赞臣
拒绝访问
暂停的
运输用户
管理员
超级管理员
会计
报表查看器

使用以下方法:

$('#tableSelect tr').click(function() {
    $(this).find('th input:radio').prop('checked', true);
})
这是一把小提琴:


编辑:为了获得更好的性能(通过多少??),请使用
输入[type=radio]
选择器:

您可以使用
委托来执行此操作,它将仅将事件处理程序附加到表元素,并对每个
tr
都有效

    $(function (){
        $('#tableSelect').delegate('tbody > tr', 'click', function(){
            $(this).find('input[name="UserSelected"]').attr('checked', true);
        });
    });
小提琴:

文件:


为什么?看看这个:“因为:radio是一个jQuery扩展,而不是CSS规范的一部分,所以使用:radio的查询无法利用本机DOM querySelectorAll()方法提供的性能提升。要在现代浏览器中获得更好的性能,请改为使用[type=“radio”]”。对于大多数用途,尤其是单个选择器调用,性能上的差异将是完全无关紧要的——我更喜欢伪类选择器,因为它简洁且可读性更好。这两种方法都很好地工作。我感谢你的帮助。我完全忘记了jquery中的find函数。谢谢。将
find('th input:radio')
更改为
find('input[type=radio])
。无需检查
th
,并且在大多数情况下
type=radio
:radio
快。请参阅对我答案的评论。@Joseph Silber:已经有了!我会尽可能具体地保留
th
。你知道这也会影响性能(虽然,就像你说的,但是多少?)。如果你说的是
th
,这里的准确性优先。明天,我可以在我的表中的任何位置添加另一个
收音机
,而不用担心破坏(或需要更改)现有代码。理想的做法是使用
th input[name=“UserSelected”]
或只使用
input[name=“UserSelected”]
,这样可以提供最好的性能和准确性。@马特-这可能是巧合,我总是更喜欢使用委托,这样你可以检查我的其他答案
$('#tableSelect tr').click(function() {
    $(this).find('th input:radio').prop('checked', true);
})
    $(function (){
        $('#tableSelect').delegate('tbody > tr', 'click', function(){
            $(this).find('input[name="UserSelected"]').attr('checked', true);
        });
    });
$('#tableSelect tr').click(function(){
    $(this).find('input[type=radio]').prop('checked', true);
});