Question

Simple form which will show additional fields (div class=”fold”) if a checkbox (div id=”foldstate”) is marked.

Clicking checkbox hides/shows additional fields as expected.

Checking the checkbox, filling out the additional fields and submitting (preview) the forms input with php for some server side validation shows up checkbox checked but the fold got still <div class="fold" style="display: none;">

Where is my mistake?

My jQuery code:

$(document).ready(function() {
    if ($("#foldstate").not(":checked")) {
        $(".fold").css("display","none");
    }
    $("#foldstate").click(function(){
        if ($("#foldstate").is(":checked")) {
            $(".fold").show("fast");
        }
        else {
            $(".fold").hide("fast");
        }
    });
});

Answer 1

The .not() function will return a collection of JQuery object or either a empty collection, when your checkbox isn’t checked. In both cases your code will evaluate to true, so that you always get display:none.

As you are sellecting by ID, I would suggest you to replace this block:

if ($("#foldstate").not(":checked")) {
    $(".fold").css("display","none");
}

By this:

if (!$("#foldstate").attr("checked")) {
    $(".fold").css("display","none");
}