Jquery一般情况下，在“是/否”单选按钮中显示/隐藏分区内的分区

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

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

如果你保持这种结构，只需一点点代码就可以实现：

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

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

$('input:radio').on('change', function () {//Register change event for all radio button                
            if ($(this).val() == 'yes') {//check value of selected radio is yes
                $(this).parent().parent().next('div').slideDown("fast");
            }
            else if ($(this).val() == 'no') {//check value of selected radio is no
                $(this).parent().parent().next('div').slideUp("fast");
            }
        });