javascript - 如果选中生成框，如何显示 div

Question

我有一个巨大的复杂表单，其中包含 Business Catalyst 中内置的数百个字段，它使用以下 jquery 来显示和隐藏多个 div:

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

长话短说，这个脚本对我来说效果很好，可以根据复选框是否切换来显示和隐藏 div。但是，我在另一个页面上生成此表单的结果，该页面允许用户编辑表单条目。生成表单结果时，初始提交中选中的复选框默认不显示。仅当取消选中(或切换)复选框时，才会显示隐藏的 div。

基本上，我需要一个脚本来说明如果选中复选框则显示相关的 div。请注意，这种设置循环的方式很可能不起作用。

非常感谢任何想法或帮助。谢谢你! :)

编辑:这是表单中的 html 示例:

<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>

Answer 1

该脚本仅在单击复选框时起作用。您必须在准备好文档后对其执行相同的操作。

  $(document).ready(function() {

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

  });