10

I have the following code, which works perfectly in Chrome/FF:

chkbx_send_demo.onchange = function(){
    if(sel_template.selectedIndex <= 0 && chkbx_send_demo.checked == true){
        alert("Choose a Template");
        sel_template.selectedIndex = 1;
    }
    if(chkbx_send_demo.checked == false){
        sel_template.selectedIndex = 0;
     }
}

But it just won't work in IE. I've tried to change the event to chkbx_send_demo.onclick and it still won't work.

Jonik
  • 80,077
  • 70
  • 264
  • 372
Francisco Freitas
  • 101
  • 1
  • 1
  • 3
  • 1
    Probably you have already checked, but: are you aure that "chkbx_send_demo" refers to the correct checkbox? Can you do a alert and confirm this? Also, the exact same code workd in FF? – Nivas Jun 25 '10 at 13:19

4 Answers4

16

Internet Explorer only fires the onchange event when the checkbox loses the focus (onblur). also see here:
http://krijnhoetmer.nl/stuff/javascript/checkbox-onchange/
and here:
http://bytes.com/topic/javascript/answers/92116-onchange-checkbox

GOsha
  • 689
  • 5
  • 13
  • 1
    IE behaviour is correct as per HTML specification about onchange "The onchange event occurs when a control loses the input focus and its value has been modified since gaining focus. This attribute applies to the following elements: INPUT, SELECT, and TEXTAREA." http://www.w3.org/TR/REC-html40/interact/scripts.html#adef-onchange – Devashish Mamgain Dec 17 '12 at 06:14
4

i faced the same issue on ie8, i used below trick to fix it. http://sleeplesscoding.blogspot.com/2010/01/fixing-ie-onchange-event-for-checkboxes.html

hetaoblog
  • 1,990
  • 5
  • 26
  • 34
1

Are you sure onclick does not work? Did you check for javascript errors?

The following works in IE7 (don't have IE6 to test)

<html>
    <head>
       <script>
            function text()
            {
                alert(document.getElementById("cbxTest").checked);
            }
       </script>
    </head>
    <body>
        <input type="checkbox" name="cbxTest" id="cbxTest" onclick="text()"/>
        <label for="cbxTest"> Test </label>
    </body>
</html>

Note: This is only for onclick. OnChange works differently in IE, see GOsha's answer.

Nivas
  • 18,126
  • 4
  • 62
  • 76
  • I'm 100% sure it's not working (i put alerts in every step of the onclick function) but strangely there's not javascript errors when i debug the script. – Francisco Freitas Jun 25 '10 at 13:11
  • Probably you have already checked, but: are you aure that "chkbx_send_demo" refers to the correct checkbox? Can you do a alert and confirm this? Also, the exact same code workd in FF? – Nivas Jun 25 '10 at 13:19
  • i can't believe it, i did an alert(chkbx_send_demo.type); and got a 'hidden'... how can document.getElementById("demo") get this element: instead of this one: ?? (and why does this only happen in IE??) But anyway, thanks, everything's clear now – Francisco Freitas Jun 25 '10 at 13:33
  • So do you say that you had two elements with the same id? then I dont think there is a 'standard' behaviour. Make sure you don't have the same id for different elements on your page. – Nivas Jun 28 '10 at 09:17
0

my JS code is now something like this:

if(navigator.appName == "Microsoft Internet Explorer"){
            alert("IE");
            chkbx_send_demo.onclick = function(){
                alert("HI");
                if(sel_template.selectedIndex <= 0 && chkbx_send_demo.checked == true){
                    alert("Choose a Template");
                    sel_template.selectedIndex = 1;
                }
                if(chkbx_send_demo.checked == false){
                    alert("HI");
                    sel_template.selectedIndex = 0;
                }
                alert("HI");
            }
        }
        else
        {
            chkbx_send_demo.onchange = function(){
                if(sel_template.selectedIndex <= 0 && chkbx_send_demo.checked == true){
                    alert("Choose a Template");
                    sel_template.selectedIndex = 1;
                }
                if(chkbx_send_demo.checked == false){
                    sel_template.selectedIndex = 0;
                }
            }
        }

No javascript errors, but the code just isn't executed on IE and i really can't understand why.

Francisco Freitas
  • 101
  • 1
  • 1
  • 3