我有一个带有单选按钮的表单。当用户选择＆＃34;不适合＆＃34;时，我希望他们继续从第二组单选按钮指示原因。我不想要显示这些原因，直到他们点击了＆＃34;不适合＆＃34;单选按钮。
如何在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>
答案 0 :(得分：2)
使用jQuery，您可以隐藏加载页面的原因，然后在单击相应的单选按钮时显示它们。
这个简单的例子并不支持所有可能的导航（即一旦你看到原因，它们仍然可见）。不过，它应该给你这个想法。
请注意，如果表单元素具有唯一ID，则可以简化对表单元素的操作，因此我已将其添加到需要的位置。
$( document ).ready(function() {
// Hide reasons initially
$("#unfit-reason").hide();
// Show reasons when unfit is clicked
$( "#radio-unfit" ).click(function() {
$("#unfit-reason").show();
});
});<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>
答案 1 :(得分：1)
尝试下面的内容，
您可以通过列出每个单选按钮的点击事件然后查找特定广播框<的
$(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>