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/