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'> <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>
Cause:
Per MSDN, the change event is
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
clickevent handler instead ofchange:…and behavior should be consistent across browsers.