如果生成一个框,则如何显示div

时间:2014-02-24 23:06:01

标签: javascript jquery html checkbox hide

我有一个巨大的,涉及到的表单,其中有数百个在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>

1 个答案:

答案 0 :(得分:2)

该脚本仅在单击复选框时有效。你必须在准备文件时做同样的事情。

  $(document).ready(function() {

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

  });