开发者

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);
        });
    });
0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜