JQuery and RadioButtons question

Question

Hi,

I have a table containing radiobuttons (i.e. 3x3 grid) and I want when I select one of them the containing the radiobutton to change colour. Following this example I did this

<table class="table-name">
<tr>
    <td>
        <span>Some text</span>
        <input type="radio" name="some-name" />
    </td>
    <td>
        <span>Some text</span>
        <input type="radio" name="some-name" />
    </td></tr>
</table>

and the javascript

$(':radio').change(function() {           
    $('.color-1').removeClass('color-1');       
    var $td = $(this).parent('td');
    if (this.checked) {               
        $td.addClass('color-1');   
    } else {                          
        $td.removeClass('color-1');
    }
});

this works well on firefox. but on internet explorer it colors the previously selected So if I select 1,1 it stays white but when I select 1,2 then 1,1 turns blue and so on.

Any ideas?

Answer 1

apparently this can be solved with using

$(':radio').click(function() ...

instead of the .change. at least in terms of compatibility with ie.

anyone has a clue why change fails or most probably what I do wrong?

Answer 2

IE (all versions) have a really buggy implementation of the onChange event on checkboxes and radio buttons. You have to use the onClick event if you want to provide a solid cross-browser behaviour.

See this link for more info.