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

Question

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

如何在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> 

Answer 1

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

Answer 2

试试下面的，

您可以通过列出 每个单选按钮 的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>