Question

基本上，我想通过单击是/否单选按钮来显示/隐藏div。我还在下面的小提琴链接中做了一些示例类型。我想制作这个Generic，就像一个函数可以做所有的是/否问题。我想避免jquery中的多重if条件。

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

我的jquery看这个。

$('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");
    }
});

小提琴的链接： http://jsfiddle.net/mgrgfqfd/

请帮助!!

Answer 1

如果你保留这种结构，可以用一小段代码来实现：

http://jsfiddle.net/mgrgfqfd/2/

HTML：

<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" data-target="gruduate">
                <label class="radio-inline">
                    <input type="radio" name="student" value="yes"> Yes
                </label>
                <label class="radio-inline">
                    <input type="radio" name="student" value="no"> No
                </label>
            </div>

            <div class="optional">

                <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="optional">
                    <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="optional">

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

JS：

$('input:radio').on('change', function() {
    $(this).parents('.control-group').next('div.optional').toggle( $(this).val() == 'yes' );
});

确保你的是/否按钮位于一个控制组内，然后将可选元素直接放在一个带有.optional类的div中。

Answer 2

您可以在单选按钮中使用data属性来指示应切换哪个DIV。

＆＃13;

$(':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);
  }
});

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

下面的代码将找到下一个div并在jquery中执行滑动，这有助于您避免多个冗余的代码行和ifs。

setTheme(R.style.AppTheme);

Jquery通常，在是/否单选按钮中显示/隐藏分区内的分区

3 个答案: