jQuery Show/Hide on Checkbox Not Working

Question

This is driving me crazy and must be simple. Basically, I've got a little jQuery function that shows/hides a DIV when it's checked/unchecked. Works fine in FF and Chrome, but doesn't work in IE7. When I check the box in IE7, nothing happens.

Any ideas?

jQuery function:

$(document).ready(function(){

    //Hide div w/id extra
    $("#extra").css("display","none");
    // Add onclick handler to checkbox w/id additional_contacts
    $("#additional_contacts").click(function(){
        // If checked
        if ($("#additional_contacts").is(":checked"))
        {
            //show the hidden div
            $("#extra").css("display","block");
        }
        else
        {
            //otherwise, hide it
            $("#extra").css("display","none");
        }
    });

});

HTML:

<input id="additional_contacts" name="additional_contacts" type="checkbox" value="yes"> 

 <div id="extra">
    <table>
      <tr class="content">
       <td width="256"></td>
       <td width="196">Email Address:<br><br></td>
       <td width="340"><input type="text" name="Email5" size="40"><br><br></td>
       <td width="170"></td>
      </tr>
    </table>
</div>

Answer 1

may be its the pseudo selector :checked that is not recognized by the IE

try

if ($("#additional_contacts")[0].checked) //use of [0] will return the DOM element
        {
            //show the hidden div
            $("#extra").css("display","block");
        }
        else
        {
            //otherwise, hide it
            $("#extra").css("display","none");
        }

or

  if ($("#additional_contacts").attr('checked'))
            {
                //show the hidden div
                $("#extra").css("display","block");
            }
            else
            {
                //otherwise, hide it
                $("#extra").css("display","none");
            }

OR

you can use change and toggle

  $("#additional_contacts").change(function(){
       $("#extra").toggle();
  });

http://jsfiddle.net/L22eF/

Answer 2

Check for Java script errors. In case if you have used console.log the functionality is not working fine as expected. Hence remove the console property and give a try!

Answer 3

I'm not sure this would solve your ie7 problem but try this code as also @jbaby noted: $(document).ready(function(){

    //Hide div w/id extra
   $("#extra").hide();
    // Add onclick handler to checkbox w/id additional_contacts
   $("#additional_contacts").click(function(){
        // If checked
        if ($(this).checked) //notice the use of this here - better jquery practice
        {
            //show the hidden div
            $("#extra").show();
        }
        else
        {
            //otherwise, hide it
            $("#extra").hide();
        }
  });

});

for being jQuery pure you could exchange .checked for .prop("checked",true)

also try using this meta tag in the code:

<meta http-equiv="X-UA-Compatible"  content="IT=edge,chrome=IE7"> 

notice that adding the chrome=IE8 isn't really needed but if you encounter a user with ie7 or less that installed chorme frame it would use chrome advanced rendering engine instead of ie7

(by the way you could also prompt them to install google frame- but that is out of topic)

from my experience this hack solves a lot of mystery IE problems.