JQuery: select the radio button when a table row is selected.

Question

I need the switch to be selected when the user clicks anywhere in the table row. I played with some options, but I can not get anything to work.

Any help is appreciated.

Here is an example 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> 

Answer 1

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: To improve (by quantity) performance, use the input[type=radio] selector: http://jsfiddle.net/mrchief/eFnL7/2/

Answer 2

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

Answer 3

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

Answer 4

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

Violin: http://jsfiddle.net/8PzX2/

Documentation:

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

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

Answer 5

You can use delegate for this, which attaches 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); }); });