Question

I have two div elements that are hidden on $(document).ready(function(){} and they are supposed to appear if their specific check box is checked, and disappear if it was checked and then unchecked. I can show the element when the checkbox is selected very easily using show() or slideDown() but when i use the if else statements it returns as false everytime and the forms stay hidden…

$(document).ready(function(){
        if($("#upload_yes").is(':checked')) {
            $("#upload_form").show();
        } else {
            $("#upload_form").hide();
        }

        if($("#new_info_yes").is(':checked')) {
                $("#new_info_form").slideDown(500);
        } else {
                $("#new_info_form").hide();
        }   
    }); 

Answer 1

See this fiddle

You must do the job in the change event.

then calling .trigger('change') on the check boxes make the div show/hide on the initial page load.

The code :

$(document).ready(function(){

    $('input#upload_yes').change(function(){
        if($(this).is(':checked')) {
            $("#upload_form").show();
        } else {
            $("#upload_form").hide();
        }
    });

    $('input#new_info_yes').change(function(){
         if($(this).is(':checked')) {
                $("#new_info_form").slideDown(500);
        } else {
                $("#new_info_form").hide();
        }   
    });

    //Trigger the change event so the divs are initially shown or hidden.
    $('input[type=checkbox]').trigger('change');

});