IE8 & IE7 onchange event is triggered only after repeated selection

问题

I have a group of radio with an onchange handler:

<input type="radio" name="Q12" value="radio" id="Q12_0"  onchange="nextPnl('Q12');">
<br/>
<input type="radio" name="Q12" value="radio" id="Q12_1"  onchange="nextPnl('Q12');">
         ​

function nextPnl(did)
{
document.write(did);

}​

The problem is that in IE8 & IE7, the onchange event is triggered only after repeated selection.

Please view this demo in IE's Developer Tools [Browser Mode] IE8: http://jsfiddle.net/3zwur/2/

回答1:

This is due to a bug with IE7 and IE8's change events. You should instead listen to the click event.

As shown in this table on quirks mode, the change event on radio buttons and checkboxes is quite buggy in IE7 and IE8.

You can listen to the click event like so:

<input type="radio" name="Q12" value="radio" id="Q12_0"  onclick="nextPnl('Q12');">
<br>
<input type="radio" name="Q12" value="radio" id="Q12_1"   onclick="nextPnl('Q12');">

And a fork of your fiddle: http://jsfiddle.net/T7VYL/

Usually, using a javascript library such as JQuery and YUI make your life easier, although from my testing, they do not fix this bug in older versions of IE.

If you would still like to listen to the change event, you can deploy this fix: http://www.ridgesolutions.ie/index.php/2011/03/02/ie8-chage-jquery-event-not-firing/. Basically it listens for the click event, and then causes the element to fire a change event.

As demonstrated by the asker's fiddle: http://jsfiddle.net/3zwur/3

回答2:

Another option is to have an onchange event as you already have, and add an onclick event which removes focus from the radio button:

<input type="radio" name="Q12" value="radio" id="Q12_0" onclick="this.blur()" onchange="nextPnl('Q12');">

回答3:

Another solution is to put the onchange event on the enclosing form via jQuery.

$('#form').on('change', function() {
    $(this).submit();
});

来源：https://stackoverflow.com/questions/11068196/ie8-ie7-onchange-event-is-triggered-only-after-repeated-selection