Question

当用户点击表格行中的任意位置时，我需要选择一个单选按钮。我一直在玩弄一些选项但却无法正常工作。

感谢任何帮助。

以下是一个示例表：

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

Answer 1

使用此：

$('#tableSelect tr').click(function() {
    $(this).find('th input:radio').prop('checked', true);
})

这是一个工作小提琴：http://jsfiddle.net/mrchief/eFnL7/1/

修改：为了更好（通过多少？）效果，请使用input[type=radio]选择器：http://jsfiddle.net/mrchief/eFnL7/2/

Answer 2

$('#tableSelect tr').click(function(){
    $(this).find('input[type=radio]').prop('checked', true);
});

小提琴： http://jsfiddle.net/8PzX2/

文档：

http://api.jquery.com/click/

http://api.jquery.com/prop/

Answer 3

$('table tr').click(function(){
    $(this).find('input[type=radio]').prop('checked', true);
});

Answer 4

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

Answer 5

您可以使用delegate执行此操作，这会将事件处理程序仅附加到表元素，并且适用于每个tr

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

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

5 个答案: