我有一个巨大的,涉及到的表单,其中有数百个在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 </span>
<input type="checkbox" name="19_s2_box" id="19_s2_box" value="1" /><span> Shift 2 </span>
<input type="checkbox" name="19_s3_box" id="19_s3_box" value="1" /><span> Shift 3 </span>
<input type="checkbox" name="19_s4_box" id="19_s4_box" value="1" /><span> Shift 4 </span>
<input type="checkbox" name="19_s5_box" id="19_s5_box" value="1" /><span> Shift 5 </span>
<input type="checkbox" name="19_s6_box" id="19_s6_box" value="1" /><span> Shift 6
</span>
</div>
</div>
答案 0 :(得分:2)
该脚本仅在单击复选框时有效。你必须在准备文件时做同样的事情。
$(document).ready(function() {
if ($( '#CAT_Custom_128' ).is(':checked')) {
$( '#19th_form' ).fadeToggle( "fast" );
}
});