javascript - 使用 JavaScript 显示/隐藏表单的某些部分。如何一次只显示一个部分？

Question

我有以下设置:

<form action="?" method="post" name="contactform">

<div class="question">
    <p><span><input type="radio" name="answer" value="Yes" onclick="showHide('one')"/></span> Yes</p>
</div>
<div id="one" class="answers" style="display:none">
    <p><input type="radio" name="answerdetail" value="Reason One" /> Reason One</p>
    <p><input type="radio" name="answerdetail" value="Reason Two" /> Reason Two</p>
    <p><input type="radio" name="answerdetail" value="Reason Three" /> Reason Three</p>
</div><!-- end answers -->

<div class="question">
    <p><span><input type="radio" name="answer" value="No" onclick="showHide('two')"/></span> No</p>
</div>
<div id="two" class="answers" style="display:none">
    <p><input type="radio" name="answerdetail" value="Reason One" /> Reason One</p>
    <p><input type="radio" name="answerdetail" value="Reason Two" /> Reason Two</p>
    <p><input type="radio" name="answerdetail" value="Reason Three" /> Reason Three</p>
    <p><input type="radio" name="answerdetail" value="Reason Four" /> Reason Four</p>
</div><!-- end answers -->

<div class="question">
    <p><span><input type="radio" name="answer" value="Not sure" /></span> Not sure</p>
</div>

当您第一次看到该表格时，只有 3 个复选框可见(是、否、不确定)。当您单击"is"时，会出现"is"的子复选框，如果您单击“否”，则会出现“否”的子复选框。

我想知道是否可以一次只显示一组子复选框？

即如果有人选中"is"，则会出现"is"的子复选框。如果他们随后改变主意并单击“否”，则"is"的子复选框会消失，而“否”的子复选框会出现(即在任何时候只有一组子复选框是可见的)。

我希望这是有道理的。

如有任何帮助，我们将不胜感激!

Answer 1

jQuery 有几个内置方法，应该对此很有用。您可以使用 .hide()/.show()切换元素的可见性。您可以使用 .next() 定位正确答案部分.此外，要处理 'change' 事件，您可以使用 .change() ，每次用户选择不同的选项时都会触发处理程序:

$(document).ready(function() {
    $('input[name="answer"]').change(function() {
        $(".answers").hide();
        $('input[name="answer"]:checked')
            .closest(".question")
            .next(".answers")
            .show();
    });
});