基于无线电选择显示/隐藏表单内容

Question

我正在构建一个表单，其中有条件字段需要根据选中的复选框来显示。我想知道如何在选中复选框时隐藏其他表单域。我也希望能够在两个复选框都选中时显示所有字段。

在下面的标记中，我添加了评论，我想呈现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> 

Answer 1

我为您的元素添加了一些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; 
} 

工作Ë xamplehttp://jsfiddle.net/cyTLm/

Answer 2

大概这是可能为您提供需要指针的东西。你可以探索更多。我已经做了一些小的修改，并使用jQuery（因为你已经标记）和小css。

退房的fiddle-

.toggle()

http://jsfiddle.net/kvaYG/

jQuery的

$(':checkbox[value=Load]').change(function(){ 
    $('.load').toggle(); //This will get triggered during the checkbox change 
//i.e when you check or unckeck the checkbox. You can use element.toggle() 
//which will show and hide based on its last appearance whether it was shown or not. 
//This is a shortcut to using .show() and .hide() 
}); 
    $(':checkbox[value=Unload]').change(function(){ 
     $('.unload').toggle(); 
}); 

的CSS

/*Initially hide all your sections*/ 
.load 
{ 
    display:none; 
} 
.unload 
{ 
    display:none; 
}