javascript - 如何显示基于先前单选按钮的单选按钮集

我有一个带有单选按钮的表单。当用户选择“不合适”时，我希望他们继续通过第二组单选按钮指示原因。在他们单击“不合适”单选按钮之前，我不希望显示这些原因。

如何在JavaScript或jQuery中完成此操作？

这是我的代码，对不起设计

<div class="col-xs-7">
<input type="radio" name="res" <?php if (isset($res) && $res=="Fit") echo "checked";?> value="Fit">Fit
			<br>
<input type="radio" name="res" <?php if (isset($res) && $res=="Unfit") echo "checked";?> value="Unfit">Unfit
			<br>
	<input type="radio" name="res" <?php if (isset($res) && $res=="all") echo "checked";?>value="all">All
		</div>
	<div class="col-xs-3">
		</div>
		</div>
	<div class="col-lg-6">
		</div>
		</div>
<h4>Reason for being unfit</h4>
	<hr>
  <div class="row">
<div class="col-lg-6">
<div class="col-xs-2">
</div>
<div class="col-xs-7">
	<input type="radio" name="ru" <?php if (isset($ru) && $ru=="Tuberculosis") echo "checked";?> value="Tuberculosis">Tuberculosis
	br>
	<input type="radio" name="ru" <?php if (isset($ru) && $ru=="Pneumonia") echo "checked";?> value="Pneumonia">Pneumonia
			<br>
	<input type="radio" name="ru" <?php if (isset($ru) && $ru=="all") echo "checked";?>value="All">All
	</div>
	<div class="col-xs-3">
		</div>
		</div>
	<div class="col-lg-6">
	</div>
	</div>

最佳答案

试试下面的，

您可以通过列出每个单选按钮的click事件，然后找到特定单选框的ID，并检查其是否等于单选框，来对此进行归档。然后，我们将显示下一个单选按钮集。

$(document).ready(function() {


  $("#unfit-reason").hide();

  // when you click the radio check whether that is radio-unfit
  $("input[name=res]").click(function() {
    if ($(this).attr("id") == "radio-unfit") {
      $("#unfit-reason").show();
    } else {
      $("#unfit-reason").hide();
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="col-xs-7">
  <input type="radio" name="res" <?php if (isset($res) && $res=="Fit" ) echo "checked";?>value="Fit">Fit
  <br>
  <input id="radio-unfit" type="radio" name="res" <?php if (isset($res) && $res=="Unfit" ) echo "checked";?>value="Unfit">Unfit
  <br>
  <input type="radio" name="res" <?php if (isset($res) && $res=="all" ) echo "checked";?>value="all">All
</div>
<div class="col-xs-3">
</div>
</div>
<div class="col-lg-6">
</div>
</div>
<div id='unfit-reason'>
  <h4>Reason for being unfit</h4>
  <hr>
  <div class="row">
    <div class="col-lg-6">
      <div class="col-xs-2">
      </div>
      <div class="col-xs-7">
        <input type="radio" name="ru" <?php if (isset($ru) && $ru=="Tuberculosis" ) echo "checked";?>value="Tuberculosis">Tuberculosis br>
        <input type="radio" name="ru" <?php if (isset($ru) && $ru=="Pneumonia" ) echo "checked";?>value="Pneumonia">Pneumonia
        <br>
        <input type="radio" name="ru" <?php if (isset($ru) && $ru=="all" ) echo "checked";?>value="All">All
      </div>
      <div class="col-xs-3">
      </div>
    </div>
    <div class="col-lg-6">
    </div>
  </div>
</div>