我正在构建一个表单,该表单具有需要根据选中的复选框显示的条件字段。我想知道在选中复选框时如何隐藏其他表单字段。当两个复选框都被选中时,我还希望能够显示所有字段。
在下面的标记中,我添加了要呈现 html 的注释。
<form class="form-horizontal">
<fieldset>
<!-- Multiple Checkboxes -->
<div class="control-group">
<label class="control-label">Multiple Checkboxes</label>
<div class="controls">
<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>
</div>
<!-- Show when "load" is checked -->
<div class="control-group">
<label class="control-label">Dorms</label>
<div class="controls">
<select id="selectbasic" name="selectbasic" class="input-xlarge">
<option>Degraff</option>
</select>
</div>
</div>
<!-- Show when "load" is checked -->
<div class="control-group">
<label class="control-label">Greek House</label>
<div class="controls">
<select id="selectbasic" name="selectbasic" class="input-xlarge">
<option>Tri Delt</option>
</select>
</div>
</div>
<!-- Show when "unload" is checked -->
<div class="control-group">
<label class="control-label">How many hops?</label>
<div class="controls">
<select id="selectbasic" name="selectbasic" class="input-xlarge">
<option>One</option>
<option>Two</option>
<option>Three</option>
<option>Four</option>
</select>
</div>
</div>
<!-- Show when "unload" is checked -->
<div class="control-group">
<label class="control-label">How many hours?</label>
<div class="controls">
<select id="selectbasic" name="selectbasic" class="input-xlarge">
<option>One</option>
<option>Two</option>
</select>
</div>
</div>
</fieldset>
</form>