jQuery show/hide div and form submit

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"); } }); });

Can you also show the relevant HTML? A jsfiddle of the problem code would be really helpful. — Jeromy French
– Jeromy French, Commented Dec 10, 2012 at 17:09

cacoroto · Accepted Answer · 2012-12-10 17:40:45Z

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"); }

Collectives™ on Stack Overflow

jQuery show/hide div and form submit

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related