基于收音机选择显示/隐藏表单内容 [英] Show/hide form contents based on radio selections

查看：130
本文介绍了基于收音机选择显示/隐藏表单内容的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

建立一个表单，其中的条件栏位需根据所选的核取方块显示。我想知道如何在选中复选框时隐藏其他表单域。我还希望能够在选中两个复选框时显示所有字段。



在下面的标记中，我添加了我想要渲染html的注释。 

 < form class =form-horizo​​ntal> 
< fieldset> 
 
 
<！ - 多个复选框 - > 
< div class =control-group> 
< label class =control-label>多个复选框< / label> 
< div class =controls> 
< label class =checkbox> 
< input type =checkboxname =checkboxesvalue =Load> 
 Load 
< / label> 
< label class =checkbox> 
< input type =checkboxname =checkboxesvalue =Unload> 
卸载
< / label> 
< / div> 
< / div> 
 
<！ - 当选择load时显示 - > 
< div class =control-group> 
< label class =control-label> Dorms< / label> 
< div class =controls> 
< select id =selectbasicname =selectbasicclass =input-xlarge> 
< option> Degraff< / option> 
< / select> 
< / div> 
< / div> 
 
<！ - 当选择load时显示 - > 
< div class =control-group> 
< label class =control-label>希腊之家< / label> 
< div class =controls> 
< select id =selectbasicname =selectbasicclass =input-xlarge> 
< option> Tri Delt< / option> 
< / select> 
< / div> 
< / div> 
 
<！ - 当选择卸载时显示 - > 
< div class =control-group> 
< label class =control-label>多少跳？< / label> 
< div class =controls> 
< select id =selectbasicname =selectbasicclass =input-xlarge> 
< option>一个< / option> 
< option>两个< / option> 
< option>三个< / option> 
< option>四个< / option> 
< / select> 
< / div> 
< / div> 
 
<！ - 当选择卸载时显示 - > 
< div class =control-group> 
< label class =control-label>多少小时？< / label> 
< div class =controls> 
< select id =selectbasicname =selectbasicclass =input-xlarge> 
< option>一个< / option> 
< option>两个< / option> 
< / select> 
< / div> 
< / div> 
 
< / fieldset> 
< / form>


解决方案

我添加了一些 / code>属性添加到您的元素。



HTML 

 < form class =form-horizo​​ntal> 
< fieldset> 
 
 
<！ - 多个复选框 - > 
< div class =control-group> 
< label class =control-label>多个复选框< / label> 
< div class =controls> 
< label class =checkbox> 
< input type =checkboxname =checkboxesvalue =Load> 
 Load 
< / label> 
< label class =checkbox> 
< input type =checkboxname =checkboxesvalue =Unload> 
卸载
< / label> 
< / div> 
< / div> 
 
<！ - 当选择load时显示 - > 
< div id =dormsclass =control-group> 
< label class =control-label> Dorms< / label> 
< div class =controls> 
< select id =selectbasicname =selectbasicclass =input-xlarge> 
< option> Degraff< / option> 
< / select> 
< / div> 
< / div> 
 
<！ - 当选择load时显示 - > 
< div id =greekclass =control-group> 
< label class =control-label>希腊之家< / label> 
< div class =controls> 
< select id =selectbasicname =selectbasicclass =input-xlarge> 
< option> Tri Delt< / option> 
< / select> 
< / div> 
< / div> 
 
<！ - 当选择卸载时显示 - > 
< div id =hopsclass =control-group> 
< label class =control-label>多少跳？< / label> 
< div class =controls> 
< select id =selectbasicname =selectbasicclass =input-xlarge> 
< option>一个< / option> 
< option>两个< / option> 
< option>三个< / option> 
< option>四个< / option> 
< / select> 
< / div> 
< / div> 
 
<！ - 当选择卸载时显示 - > 
< div id =hoursclass =control-group> 
< label class =control-label>多少小时？< / label> 
< div class =controls> 
< select id =selectbasicname =selectbasicclass =input-xlarge> 
< option>一个< / option> 
< option>两个< / 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;               //jsfiddle.net/cyTLm/rel =nofollow> http://jsfiddle.net/cyTLm/  
 
Im building a form that has conditional fields that need to show based on what checkboxes are selected. I want to know how I can hide other form fields when a checkbox is selected. I also want to be able to show all fields when both checkboxes are selected. 



In the markup below, I have added comments where I want to render the 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>



 解决方案 
I added some id attributes to your elements.



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

Working Example http://jsfiddle.net/cyTLm/


                        
这篇关于基于收音机选择显示/隐藏表单内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆