Onchange On Radiobutton Not Working Correctly In IE8

I'm forced to work with IE8 (8.0.7601.17514) and I have this simple page:

Solution 1:

In Internet Explorer (up to at least IE8) clicking a radio button or checkbox to change its value does not actually trigger the onChange event until the the input loses focus.

Thus you need to somehow trigger the blur event yourself.. one suggestiong would be to have a function: as follows:

function radioClick()
{
 this.blur();  
 this.focus();  
}


<input type="radio" name="rad" value="1" onclick="radioClick" onchange="alert(1);"/>

Now your onchange event should be triggered but as you can see it is redundant code thus you are better off just using the onclick event handler.

The better solution is to use a modern javascript library like jquery which handles all these quirks for you..

Solution 2:

Technically, IE actually got this right. From the fine specification:

change

The change event occurs when a control loses the input focus and its value has been modified since gaining focus. This event is valid for INPUT, SELECT, and TEXTAREA. element.

So in order for a change event to be trigger, the specification says that the element must lose focus (i.e. a blur is required). The usual kludge is to use a click handler or force the blur as the others have suggested.

Solution 3:

use onclick, but ie is call the event handler before the value (or checked attribute) was changed msdn

Share