使用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个复选框（是，否，不确定）。 单击“是”时，将显示“是”的子复选框，如果单击“否”，则会显示“否”的子复选框。

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

即如果有人检查“是”，则出现“是”的子复选框。 然后，如果他们改变主意并单击“否”，则“是”的子复选框将消失，并显示“否”的子复选框（即，任何时候只能看到一组子复选框）。

我希望这是有道理的。

任何帮助将不胜感激！

Answer 1

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

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

Answer 2

这是我如何处理这个问题：

演示测试： http ： //jsfiddle.net/earthdesigner/UYWx8/

Answer 3

考虑到你的HTML，我能想到的最简单的方法：

$('input:radio').change(
    function(){
        $('.answers').slideUp();
        $(this).closest('div').next('.answers').slideDown();
    });​

JS小提琴演示 。

参考文献：

• closest() 。
• next() 。
• slideDown() 。
• slideUp() 。