jQuery radio onchange toggle class of parent element?

Question

Please have a look on the following:

$('#myRadio').change(function() {           

    if($(this).is(':checked'))  {
        $(this).parent().addClass('green');
    } else {                              
        $(this).parent().removeClass('green');
    }
});

Markup lookslike somewhat as following

<table>
  <tr>
    <td>Some text 1 </td>
    <td><input type="radio" value="txt1" name="myRadio" id="text1" /></td>
    <td>Some text 2 </td>
    <td><input type="radio" value="txt2" name="myRadio" id="text2" /></td>
    <td>Some text 3 </td>
    <td><input type="radio" value="txt3" name="myRadio" id="text2" /></td>
  </tr>
</table>

When I switch radio, above javascript code applies 'green' to TD tag, which is fine. But if I change the selection to another it adds the green to another but doesnt remove the green from the previously selected radio.

How do I make it work so that selecting a radio option changes its parent TD's class to green and selecting another will reset all but add green to only the newly selected!

Can it also be made to change class of its first previous TD which contains "some text 3" etc??

Thanks.

Answer 1

Try something like this:

if($(this).is(':checked'))  {
    $(this).parent().parent().parent().find('.green').removeClass('green');
    $(this).parent().addClass('green');
}

This will find the table element of your current radio button grouping, find any elements with the green class, and remove the class.

Alternatively, if you only have one radio button group on the page, it would be simpler to just do:

$('.green').removeClass('green');

Answer 2

You shouldn't use the change() event on radio buttons and checkboxes. It behaves a little dodgy and inconsistent across browsers (it causes problems in all versions of IE)

Use the click() event instead (don't worry about accessibility, because the click event will also be fired if you activate/select a radio button with the keyboard)

And as the others here pointed out, resetting the green is easy as well:

So simply change your code to

$('#myRadio').click(function() {           
    $(this).parents("tr").find(".green").removeClass("green");

    if($(this).is(':checked'))  {
        $(this).parent().addClass('green');
    }
});

EDIT: as requested in comment, also change the previous td:

$('#myRadio').click(function() {           
    $(this).parents("tr").find(".green").removeClass("green");

    if($(this).is(':checked'))  {
        $(this).parent().prev().andSelf().addClass('green');
    }
});

or even better, turning all td elements of the parent row green:

$('#myRadio').click(function() {           
    $(this).parents("tr").find(".green").removeClass("green");

    if($(this).is(':checked'))  {
        $(this).parents("tr").find("td").addClass('green');
    }
});