Select radio button from a tr onclick

Question

Here's my tr which is inside a form:

        <tr id="mlevel" class="__tr_class__" onclick="needFunction()">
            <td class="checkbox"><input type="radio" name="membership" id="__ID__" value="__ID__" /></td>
            <td class="icon"><img src="__Icon__" width="60" height="60"/></td>
            <td class="name"><h2>__Name__</h2></td>
            <td class="price"><h4>__Price__ for __Days__ Days</h4></td> 
            <td class="auto"><h4>__Auto__</h4></td>
            <td class="auto"><h4>__Active__</h4></td>
        </tr>

When I click on the tr I want the Radio Input to be selected. I would like to use jquery or something simple. Just not sure which way to go. Does anyone know of a simple function to do this?

Answer 1

You don't really need a function, the following should work:

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

---

Edited in response to @whatshakin's question:

that works perfectly. Can you explain: $('input[type=radio]',this)

This looks for an element that matches the 'input[type=radio]' using a CSS3 style attribute selector (looking for input elements of type="radio") within the context of this (this being the current object, in this instance the tr).

A slightly more authoritative description/explanation of how this works is at api.jquery.com/jQuery

---

Edited because it was irritating me that the radio couldn't be un-checked, the following corrects that:

$(document).ready(
  function() {
    $('tr').toggle(
      function(){
        $('input:radio', this).attr('checked',true);
      },
      function() {
        $('input:radio', this).attr('checked',false);
      }
      );
  }
  );

With thanks @Thomas (in comments) for pointing out the erroneous assumption I made in the previous code, that while $(this).attr('checked','checked') evaluates to true, obviously '' wouldn't evaluate to false. Hopefully this approach rectifies that earlier naïveté and silliness.

Also: demo located at jsbin

---

Edited the above code (the one using toggle()) in response to @Tim Büthe's comment:

Why don't you use the ":radio" pseudo selector?

A pseudo-selector that I didn't even know about until I read his comment, and then visited the jQuery API.

Answer 2

Here's a neat toggle that works without inline Javascript (and with multiple radio buttons):

The Code:

$(function() { // <== Doc ready

    $('tr').click(function(event) {  

        if(event.target.type != "radio") {

            var that = $(this).find('input:radio');
            that.attr('checked', !that.is(':checked'));

        }
    });
});

jsFiddle example

The Breakdown:

1. Create a .click() handler for all tr elements with $(tr).click()

2. In the handler assign a variable to the radio button within the tr using $(this).find('input:radio'). This looks through all the descendants of this (the tr clicked) and finds the radio buttons. The jQuery context uses .find() in its implementation, so the previous is synonymous with $('input:radio', this)

3. Set the checked attribute of the radio button to the opposite of what it is. Things can be checked or unchecked with true or false, and .is(':checked) returns true or false. !that.is(':checked') simply is the opposite of the currently checked state. Note that we don't want to fire this action if the user clicks directly on the radio button, since that'd cancel the native effect of the check, so we use if (event.target.type != "radio").