CODEWITHSUNDEEP
javascriptjqueryhtmlcheckboxhide
user3321396
user3321396

Reputation: 3

How to display a div if a box is generated as checked

I have a huge, involved form with hundreds of fields built in Business Catalyst that uses the following jquery to show and hide several divs:

$(document).ready(function() {
    $( '#CAT_Custom_128' ).click(function() {
        $( '#19th_form' ).fadeToggle( "fast" );
    });
});

Long story short this script works beautifully for me to show and hide divs based on if a check box is toggled. However I am generating the results of this form on another page that allows a user to edit the form entries. When the form results are generated the check boxes selected in the initial submission are default not shown. It is only when the checkboxes are unchecked (or toggled) that the hidden divs are shown.

Basically I need a script that says if a checkbox is generated as checked a correlating div is displayed. Note that the way this is set up a loop will most likely not work.

Any ideas or help are greatly appreciated. Thank you! :)

EDIT: Here is a sample of the html within the form:

<div class="twelve columns">
<label>Select the dates for your service site.</label>
</div>
<div class="row">
<div class="six columns label_text">
<input type="checkbox" name="CAT_Custom_128" id="CAT_Custom_128" value="1" /><span> Saturday, April 19th</span>
<br />
<input type="checkbox" name="CAT_Custom_129" id="CAT_Custom_129" value="1" /><span> Sunday, April 20th</span>
<br />
<input type="checkbox" name="CAT_Custom_130" id="CAT_Custom_130" value="1" /><span> Monday, April 21st</span>
<br />
<input type="checkbox" name="CAT_Custom_131" id="CAT_Custom_131" value="1" /><span> Tuesday, April 22nd</span>
</div>
<div class="six columns label_text">
<input type="checkbox" name="CAT_Custom_132" id="CAT_Custom_132" value="1" /><span> Wednesday, April 23rd</span><span> </span>
<br />
<input type="checkbox" name="CAT_Custom_133" id="CAT_Custom_133" value="1" /><span> Thursday, April 24th</span>
<br />
<input type="checkbox" name="CAT_Custom_134" id="CAT_Custom_134" value="1" /><span> Friday, April 25th</span>
<br />
<input type="checkbox" name="CAT_Custom_135" id="CAT_Custom_135" value="1" /><span> Saturday, April 26th</span>
</div>
</div>
</div>    
<div id="19th_form" class="servicesite_form_date" style="display: none;">
<div class="h2_date"><span>Saturday, April 19th</span>
</div>
<div class="row shift_selection">
<div class="twelve columns">
<p><span>Select each box to customize up to six shifts.</span>
</p>
<input type="checkbox" name="19_s1_box" id="19_s1_box" value="1" /><span> Shift 1 &nbsp;&nbsp; </span>
<input type="checkbox" name="19_s2_box" id="19_s2_box" value="1" /><span> Shift 2 &nbsp;&nbsp; </span>
<input type="checkbox" name="19_s3_box" id="19_s3_box" value="1" /><span> Shift 3 &nbsp;&nbsp; </span>
<input type="checkbox" name="19_s4_box" id="19_s4_box" value="1" /><span> Shift 4 &nbsp;&nbsp; </span>
<input type="checkbox" name="19_s5_box" id="19_s5_box" value="1" /><span> Shift 5 &nbsp;&nbsp; </span>
<input type="checkbox" name="19_s6_box" id="19_s6_box" value="1" /><span> Shift 6
</span>
</div>
</div>

Upvotes: 0

Views: 111

Answers (1)

Joe Saad
Joe Saad

Reputation: 1950

The script only works on click of the checkbox. You gotta do the same for it on document ready. 

  $(document).ready(function() {

      if ($( '#CAT_Custom_128' ).is(':checked')) {
        $( '#19th_form' ).fadeToggle( "fast" );
      }

  });

Upvotes: 2

Related Questions