我正在开发一个必须根据单选/复选框选择显示/隐藏的表单。我有这一半的工作，但我遇到了许多错误，我确信这段代码可以更有效地优化/编写。
表单的流程需要根据选择的复选框/收音机来工作。我不完全确定在 SO 帖子中进行布局的最佳方式，所以我评论了 html。如果我无论如何都能澄清这一点，如果有人有建议，我会很乐意这样做
在下面的标记中，我添加了要呈现 html 的注释。我在 JS Fiddle 有一个工作示例。你可以在这里看到http://jsfiddle.net/gTAGG/2/
<form id="dorm-form" class="order-start form-horizontal form-horizontal-left-align" action="/reservation#hourly" method="GET">
<!-- SELECT school -->
<div class="control-group">
<label class="control-label" for="school">College town:</label>
<div class="controls">
<select name="school" class="span3">
<option value="">-- Choose your college town--</option>
{% for school in schools %}{% if school.name != 'Other' %}<option value="{{ school.id }}">{{ school.name }}</option>{% endif %}{% endfor %}
</select>
</div>
</div>
<!-- Multiple Checkboxes -->
<div class="control-group">
<p> Tell us what you need </p>
<label class="checkbox">
<input type="checkbox" name="checkboxes" value="Load">
Load
</label>
<label class="checkbox">
<input type="checkbox" name="checkboxes" value="Unload">
Unload
</label>
</div>
<!-- Multiple Checkboxes -->
<!-- values are still load & unload. Figure out how these save -->
<div id="movingtruck" class="control-group">
<p> Do you need a moving truck (flat rate $125) </p>
<label class="radio">
<input type="radio" name="radios" value="Yes" checked="checked">
Yes
</label>
<label class="radio">
<input type="radio" name="radios" value="No">
No
</label>
</div>
<!-- If you select either "load" or just "unload" this form should show. If both load & unload are selected, this does not show.-->
<div id="radios" class="control-group">
<p> Do you live in a dorm or greekhouse? </p>
<label class="radio">
<input type="radio" name="radios" value="Greek" checked="checked">
Yes
</label>
<label class="radio">
<input type="radio" name="radios" value="NoGreek">
No
</label>
</div>
<!-- if "yes" is selected above, then this should show. If "no" is selected above, this should hide.-->
<div id="dorms" class="control-group">
<label class="control-label" for="dorm">
<i class="error-warning cb-icon cb-icon-warning"></i>
Dorm:
</label>
<div class="controls">
<select require="true" name="dorm">
<option value="">-- Choose your dorm --</option>
{% for dorm in dorms %}<option value="{{ dorm.id }}">{{ dorm.name }}</option>{% endfor %}
</select>
</div>
</div>
<!-- if "yes" is selected above, then this should hide. If "no" is selected above, this should hide.-->
<div id="greek" class="control-group">
<label class="control-label">Greekhouse</label>
<div class="controls">
<input id="textinput" name="textinput" type="text" placeholder="name of your house" class="input-xlarge">
</div>
</div>
<!-- Show when "unload" is checked as well as when "no" selected. If "yes" is selected, this should hide -->
<div class="row" id="hops">
<div class="span6 control-group">
<label class="control-label" for="bellhops">
<i class="error-warning cb-icon cb-icon-warning"></i>
How many Bellhops?
</label>
<div class="controls">
<select name="bellhops">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
<option value="6">Six</option>
</select>
</div>
</div>
</div>
<!-- Show when "unload" is checked as well as when "no" selected. If "yes" is selected, this should hide -->
<div id="bellhop-hours" class="span6 control-group">
<label class="control-label" for="hours">
<i class="error-warning cb-icon cb-icon-warning"></i>
How many hours?
</label>
<div class="controls">
<select name="hours" id="hours">
<option value="1.5">One and a half</option>
<option value="2">Two</option>
<option value="2.5">Two and a half</option>
<option value="3">Three</option>
<option value="3.5">Three and a half</option>
<option value="4">Four</option>
<option value="4.5">Four and a half</option>
<option value="5">Five</option>
<option value="5.5">Five and a half</option>
<option value="6">Six</option>
<option value="6.5">Six and a half</option>
<option value="7">Seven</option>
<option value="7.5">Seven and a half</option>
<option value="8">Eight</option>
</select>
</div>
</div>
<!-- BUTTON -->
<div class="form-controls">
<button class="btn btn-lime">Reserve Your Bellhops!</button>
</div>
</form>
这是我正在使用的 JS
// Inputs for Load & Unload
$("input[value=Load]").click(function(){
if($(this).is(":checked")){
$("#dorms, #greek,").show();
}else{
$("#dorms, #greek").hide();
}
});
$("input[value='Unload']").click(function(){
if($(this).is(":checked")){
$("#movingtruck").show();
}else{
$("#hops, #hours").hide();
}
});
// Inputs for Do you need a moving truck?
$("input[value='Yes']").click(function(){
if($(this).is(":checked")){
$("#hops, #bellhop-hours").show();
}
});
$("input[value='No']").click(function(){
if($(this).is(":checked")){
$("#hops, #bellhop-hours").show();
}
});
// Radios for "Do you live in a dorm or greekhouse?"
// Radios arent hiding when selecting "nogreek" Check on radios.
$("input[value='Greek']").click(function(){
if($(this).is(":checked")){
$("#dorms, #greek").show();
}else{
$("#dorms, #greek, #hops").hide();
}
});
$("input[value='NoGreek']").click(function(){
if($(this).is(":checked")){
$("#hops, #hours").show();
}else{
$("#dorms, #greek").hide();
}
});
还有一点点 CSS
/* Hiding form elements */
#greek, #dorm-selector, #hops, #dorms, #hidden, #movingtruck, #bellhop-hours{
display:none;
}