我正在构建一个表单,其中包含需要根据选中的复选框显示的条件字段。我想知道如何在选中复选框时隐藏其他表单域。我还希望能够在选中两个复选框时显示所有字段。
在下面的标记中,我在要呈现 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>
最佳答案
我向您的元素添加了一些 id
属性。
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 id="dorms" 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 id="greek" 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 id="hops" 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 id="hours" 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>
jQuery
$("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")){
$("#hops, #hours").show();
}else{
$("#hops, #hours").hide();
}
});
CSS
#greek, #dorms, #hops, #hours{
display:none;
}
关于javascript - 根据单选按钮显示/隐藏表单内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16328576/