onChange and checkbox/radio in IE

Posted on August 3, 2010
by

I was writing a bit of Javascript this afternoon. Everything was fine until it came to test it on IE, and there the nightmare began (again, and again, and again…). Yes, IE (all versions) sucks at handling onChange events for checkboxes and radio buttons. Sometimes it works, sometimes not at all, sometimes you gotta click somewhere else in the page to trigger it…

I’ve made some researches on the Internet, and there is no beautiful way to fix that. The only way is to totally give up onChange events for those two elements (yes, you HAVE to give up a very regular feature just because ONE browser doesn’t support it properly), and to replace it by an onClick event. You’ll then hope that your code doesn’t change the values of your checkboxes in another way than by clicking on it, otherwise you’re fucked. Or you have to call the related onClick function every time.

Let’s see for example the case when you use an HTML label element for your input:

<input type="checkbox" onclick="someFunction();" id="myCheckbox" />
 
<label
  for="myCheckbox"
  onclick="document.getElementById(this.for).onclick();"
>
    Check me
</label>

I just had to change that in my case hopefully.

About the author

Cyril Mazur is a serial web entrepreneur with experience in various fields: online dating, forex & finance, blogging, online advertising... who enjoys building things that people like to use.

Leave the first comment