[jQuery] input type='radio' in a TD with onclick

[Peter Bengtsson]

This is the HTML I have to work with:
  <table>
    <tr>
      <td class="foo">
        <input type="radio" name="tra" value="one" />
      </td>
      <td class="foo">
        <input type="radio" name="tra" value="two" />
      </td>
    </tr>
  </table>

My first attempt was this::

 $('td.foo').click(function() {
    $(this).children()[0].checked = !$(this).children()[0].checked;
 });


That works fine when you press anywhere inside the TD and it checks
the radio button. So far so good. The problem is when you click on the
actual radiobutton. That "natural" click checks the radio button but
the parenting TD onclick reverses it immediately. I hope it makes
sense.
What can I do to prevent this?

I tried::

 $('td.foo').click(function() {
    $(this).children()[0].checked = !$(this).children()[0].checked;
 });
 $('td.foo input').unbind('click');

but it didn't work.