Internet Explorer doesn't execute onChange function

Question

I have this code which is supposed to hide and show a DIV by checking and unchecking a form checkbox using the control onChange event. It works in Chrome, Firefox, Safari and Opera but IE 8 and 9 refuse to cooperate... There are no error messages in the console. Anything I'm missing?

Thanks for any help!

<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<title>Demo</title>
<script type="text/javascript">
var divVisible = true;
function Passport() {
   if (divVisible) {
      document.getElementById('mydiv').style.visibility="hidden";
      divVisible = false;
   }
   else {
      document.getElementById('mydiv').style.visibility="visible";
      divVisible = true;
   }
}
</script>
</head>
<body>
   <form>
      <input type="checkbox" onchange="Passport();" value="Passport">Passport
   </form>
   <div style="height: 100px; width: 100px; background-color: #ff0;" id="mydiv"></div>
</body>
</html>

Don't bind event handlers _inline_ (as the `` attribute). Use either `onchange` property or `addEventListener`/`attachEvent` methods. I won't explain them to you. There are plenty about them on the web. — matewka, Nov 25 '13 at 17:42
Are you having the check box lose its focus? See: http://stackoverflow.com/questions/10579019/onchange-on-radiobutton-not-working-correctly-in-ie8 — falconspy, Nov 25 '13 at 17:43
Why are you not using `.checked` to determine if it should be shown hidden? — epascarello, Nov 25 '13 at 17:56
I wasn't aware of the fact focus must go for the change to be efective. Thanks for the help. — Fabricio, Nov 26 '13 at 09:24
@epascarello Because this is not my code. :-) I was just trying to adapt it and faced the onchange issue. But I will do that for the final version. — Fabricio, Nov 26 '13 at 09:32

score 3 · Accepted Answer · edited May 23 '17 at 11:52

3

According to this answer

onchange in IE only fires when the checkbox loses focus. So if you tab to it, hit space a few times, tab out, you'll only get one onchange event, but several onclick events.

You should change your code to use the onclick event instead:

<input type="checkbox" onclick="Passport();" value="Passport">Passport</input>

edited May 23 '17 at 11:52

Community

1
1

answered Nov 25 '13 at 18:03

bastos.sergio

6,684
4
26
36

score 2 · Answer 2 · answered Nov 25 '13 at 18:03

2

A checkbox input will not fire any change events until the focus is lost. The input value changes everytime it's clicked.

Change onchange="Passport();" for onclick="Passport();"

answered Nov 25 '13 at 18:03

plalx

42,889
6
74
90

score 1 · Answer 3 · answered Nov 25 '13 at 18:02

Change the onchange to onclick since IE8 fires onchange when focus is lost

And adjust it based on the state of the checkbox

<input type="checkbox" onchange="Passport(this.checked);" id="passportCB" value="Passport"><label for="passportCB">Passport</label>

and the function

function Passport(state) {
      document.getElementById('mydiv').style.visibility= state ? "hidden" : "visible";
}

I also added a label, so the user can click the text and toggle the checkbox state.

Internet Explorer doesn't execute onChange function

3 Answers3