基於無線電選擇顯示/隱藏表單內容

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; 
}