Jquery通常，在“是/否单选”按钮中显示/隐藏部门内的部门 [英] Jquery Generically, show/Hide division within division in Yes/No Radio button

问题描述

基本上，我想通过单击是/否单选按钮显示/隐藏div。我也在下面的小提琴链接做了样本类型。我想让这个泛型，像一个函数可以做所有的是/否的问题。并且我想避免多个如果条件在jquery。

 < div class =container> 
< div class =panel panel-default> 
< div class =panel-body> 
< div class =well well-sm> 
< label class =control-label> 1）您是学生吗？< / label> 
< div class =control-group> 
< label class =radio-inline> 
< input type =radioname =studentid =studentYesvalue =yes>是
< / label> 
< label class =radio-inline> 
< input type =radioname =studentid =studentNovalue =no>否
< / label> 
< / div> 
 
< div id =stdTypesclass =studentsType> 
 
< label class =control-label> 1.1）您是研究生吗？< / label> 
< div class =control-group> 
< label class =radio-inline> 
< input type =radioname =gradstdid =gradstd1value =yes>是
< / label> 
< label class =radio-inline> 
< input type =radioname =gradstdid =gradstd2value =no>否
< / label> 
< / div> 
< div class =departName> 
< label class =control-label> 1.2）请输入您的部门？< / label> 
< div class =control-group> 
< input type =text/> 
< / div> 
< / div> 
 
< / div> 
< / div> 
< div class =well well-sm> 
< label class =control-label> 2）您是否在谋生？< / label> 
< div class =control-group> 
< label class =radio-inline> 
< input type =radioname =livingvalue =yes>是
< / label> 
< label class =radio-inline> 
< input type =radioname =livingvalue =no>否
< / label> 
< / div> 
 
< div class =earning> 
 
< label class =control-label> 2.1）您赚多少？< / label> 
< div class =control-group> 
< input type =text/> 
< / div> 
 
< / div> 
 
 
 
< / div> 
  

我的jquery看看这个。

  $（'input [name =student]：radio'）。change（function（）{
 var radio_value =（$（'input：radio [name =student]：checked'）。val（））; 
 if（radio_value =='yes'）{
 $ '）.slideDown（fast）; 
} 
 else if（radio_value =='no'）{
 $（'。studentsType'）。slideUp（fast）; 
} 
}）; 
 
 $（'input [name =gradstd]：radio'）。change（function（）{
 var radio_value =（$（'input：radio [name =gradstd ]：checked'）。val（））; 
 if（radio_value =='yes'）{
 $（'departName'）。slideDown（fast）; 
} 
 else if（radio_value =='no'）{
 $（'departName'）。slideUp（fast）; 
} 
} 
 $（'input [name =living]：radio'）。change（function（）{
 var radio_value =（$（'input：radio [name =living]： ）.val（））; 
 if（radio_value =='yes'）{
 $（'。earning'）。slideDown（fast）; 
} 
 if（radio_value =='no'）{
 $（'。earning'）。slideUp（fast）; 
} 
}）; 
  

Fiddle的链接：
http://jsfiddle.net/mgrgfqfd/

请帮助!!

解决方案

您可以在单选按钮中使用数据属性来指示应该切换哪个DIV。 p>

  $（'：radio [data-rel]'）。change（function（）{var rel = $（。 ）;。relata（';'）; rel（';'）选择）。val（）; rel.find（：radio，：checkbox）。prop（checked，false）;}}）;  
  .studentsType，.departName，.earning {display：none;}  
 
 < script src =https://ajax.googleapis.com/ajax/libs/jquery/1.11。 1 / jquery.min.js>< / script>< div class =container> < div class =panel panel-default> < div class =panel-body> < div class =well well-sm> < label class =control-label> 1）您是学生吗？< / label> < div class =control-group> < label class =radio-inline> < input type =radioname =studentid =studentYesvalue =yesdata-rel =studentsType>是< / label& < label class =radio-inline> < input type =radioname =studentid =studentNovalue =nodata-rel =studentsType> No< / label& < / div> < div id =stdTypesclass =studentsType> < label class =control-label> 1.1）您是研究生吗？< / label> < div class =control-group> < label class =radio-inline> < input type =radioname =gradstdid =gradstd1value =yesdata-rel =departName>是< / label& < label class =radio-inline> < input type =radioname =gradstdid =gradstd2value =nodata-rel =departName> No< / label& < / div> < div class =departName> < label class =control-label> 1.2）请输入您的部门？< / label> < div class =control-group> < input type =text/> < / div> < / div> < / div> < / div> < div class =well well-sm> < label class =control-label> 2）您是否在谋生？< / label> < div class =control-group> < label class =radio-inline> < input type =radioname =livingvalue =yesdata-rel =earning>是< / label& < label class =radio-inline> < input type =radioname =livingvalue =nodata-rel =earning> No< / label& < / div> < div class =earning> < label class =control-label> 2.1）您赚多少？< / label> < div class =control-group> < input type =text/> < / div> < / div> < / div> < / div> < div class =panel-footer>面板页脚< / div> < / div>< / div>  
 

Basically, I wanted to show/hide the div by clicking Yes/No Radio button. I have also done a sample types in the fiddle link below. I want to make this Generic, like one function can do for all the yes/no questions. and i want to avoid the multiple if condtion in jquery.

<div class="container">
        <div class="panel panel-default">
<div class="panel-body">
    <div class="well well-sm">
        <label class="control-label">1) Are you a Student??</label>
        <div class="control-group">
            <label class="radio-inline">
                <input type="radio" name="student" id="studentYes" value="yes"> Yes
            </label>
            <label class="radio-inline">
                <input type="radio" name="student" id="studentNo" value="no"> No
            </label>
        </div>

        <div id="stdTypes" class="studentsType">

            <label class="control-label">1.1) Are you a Graduate Student?</label>
            <div class="control-group">
                <label class="radio-inline">
                    <input type="radio" name="gradstd" id="gradstd1" value="yes"> Yes
                </label>
                <label class="radio-inline">
                    <input type="radio" name="gradstd" id="gradstd2" value="no"> No
                </label>
            </div>
            <div class="departName">
                <label class="control-label">1.2) Please Enter your Department?</label>
                <div class="control-group">
                    <input type="text" />
                </div>
            </div>

        </div>
    </div>
    <div class="well well-sm">
        <label class="control-label">2) Are you earning for your living?</label>
        <div class="control-group">
            <label class="radio-inline">
                <input type="radio" name="living" value="yes"> Yes
            </label>
            <label class="radio-inline">
                <input type="radio" name="living"  value="no"> No
            </label>
        </div>

        <div class="earning">

            <label class="control-label">2.1) How much do you earn?</label>
            <div class="control-group">
                <input type="text" />
            </div>

        </div>



    </div>

My jquery look this.

$('input[name="student"]:radio').change(function () {
    var radio_value = ($('input:radio[name="student"]:checked').val());
    if (radio_value == 'yes') {
        $('.studentsType').slideDown("fast");
    }
    else if (radio_value == 'no') {
        $('.studentsType').slideUp("fast");
    }
});

$('input[name="gradstd"]:radio').change(function () {
    var radio_value = ($('input:radio[name="gradstd"]:checked').val());
    if (radio_value == 'yes') {
        $('.departName').slideDown("fast");
    }
    else if (radio_value == 'no') {
        $('.departName').slideUp("fast");
    }
});
$('input[name="living"]:radio').change(function () {
    var radio_value = ($('input:radio[name="living"]:checked').val());
    if (radio_value == 'yes') {
        $('.earning').slideDown("fast");
    }
    else if (radio_value == 'no') {
        $('.earning').slideUp("fast");
    }
});

Links for Fiddle: http://jsfiddle.net/mgrgfqfd/

Please help !!

解决方案

You can use a data attribute in the radio buttons to indicate which DIV should be toggled.

$(':radio[data-rel]').change(function() {
  var rel = $("." + $(this).data('rel'));
  if ($(this).val() == 'yes') {
    rel.slideDown();
  } else {
    rel.slideUp();
    rel.find(":text,select").val("");
    rel.find(":radio,:checkbox").prop("checked", false);
  }
});

.studentsType,
.departName,
.earning {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container">
  <div class="panel panel-default">
    <div class="panel-body">
      <div class="well well-sm">
        <label class="control-label">1) Are you a Student??</label>
        <div class="control-group">
          <label class="radio-inline">
            <input type="radio" name="student" id="studentYes" value="yes" data-rel="studentsType">Yes
          </label>
          <label class="radio-inline">
            <input type="radio" name="student" id="studentNo" value="no" data-rel="studentsType">No
          </label>
        </div>

        <div id="stdTypes" class="studentsType">

          <label class="control-label">1.1) Are you a Graduate Student?</label>
          <div class="control-group">
            <label class="radio-inline">
              <input type="radio" name="gradstd" id="gradstd1" value="yes" data-rel="departName">Yes
            </label>
            <label class="radio-inline">
              <input type="radio" name="gradstd" id="gradstd2" value="no" data-rel="departName">No
            </label>
          </div>
          <div class="departName">
            <label class="control-label">1.2) Please Enter your Department?</label>
            <div class="control-group">
              <input type="text" />
            </div>
          </div>

        </div>
      </div>
      <div class="well well-sm">
        <label class="control-label">2) Are you earning for your living?</label>
        <div class="control-group">
          <label class="radio-inline">
            <input type="radio" name="living" value="yes" data-rel="earning">Yes
          </label>
          <label class="radio-inline">
            <input type="radio" name="living" value="no" data-rel="earning">No
          </label>
        </div>

        <div class="earning">

          <label class="control-label">2.1) How much do you earn?</label>
          <div class="control-group">
            <input type="text" />
          </div>

        </div>



      </div>

    </div>
    <div class="panel-footer">Panel footer</div>
  </div>

</div>

这篇关于Jquery通常，在“是/否单选”按钮中显示/隐藏部门内的部门的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！