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(\'         


        

Answer 1

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');
    }
});