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.