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.