views:

6556

answers:

3

The following html code works in Firefox, but for some reason fails in IE (Label2 is not shown). Is that a bug or I miss something?

Any help would be appreciated.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt;
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        <script src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js" type="text/javascript">
        </script>
        <script>
            jQuery(document).ready(function(){
                function setVis(){
                    var val = $("#check").is(":checked");
                    if (val) 
                        $("#g_1").show();
                    else 
                        $("#g_1").hide();
                }

                setVis();
                $("#check").change(setVis);
            });
        </script>
    </head>
    <body>
        <span>
            <input type="checkbox" id="check" />
            <label>Label1</label>
        </span>
        <span id="g_1">
            <label>Label2</label>
        </span>
    </body>
</html>
+5  A: 

Remember that the onchange event is triggered after you check the checkbox and then leave the checkbox. Did you try checking it, then clicking somewhere else on the document?

You may want to employ the click and keypress events in jQuery instead (for checking the box via click and spacebar).

<sidequestion>Is there any reason you're declaring/defining a function within your document ready paragraph, rather than outside of it?</sidequestion>

One more edit; may I recommend this sleeker code:

jQuery(document).ready(function(){
    $("#g_1").hide();
    $("#check").change(function() { $("#g_1").toggle(); });
});
cLFlaVA
Thanks for help, you've got my vote. I posted the html code by stripping down the real (more complex) one, that's why it is not in the best shape. But still I see the value of your suggestions.
Gennady Shumakher
+16  A: 

Cause:

Per MSDN, the change event is

...fired when the contents are committed and not while the value is changing. For example, on a text box, this event is not fired while the user is typing, but rather when the user commits the change by leaving the text box that has focus.

Behavior for checkboxes is similar: in IE the event does not fire until focus is removed from the element (try it: click then tab off of the checkbox and behavior is as expected). Firefox apparently does not respect this distinction.

Solution:

Use the click event handler instead of change:

            $("#check").click(setVis);

...and behavior should be consistent across browsers.

Shog9
Most consider this a bug in IE: http://webbugtrack.blogspot.com/2007/11/bug-193-onchange-does-not-fire-properly.htmlAs soon as the selection in a radio set (or checkbox) is made, the value has changed. IMHO, IE is the only browser that doesn't handle this correctly.
scunliffe
+1  A: 

Hi, Change the .change event to .click event. the result in both browser is the same. in IE when you click the checkbox, blur didn't occur.

Ata
That might be a problem if the box is checked when the page loads (via cookie or something).
Nathan Long