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个复选框（是，否，不确定）。点击“是”＆＃39;后，“是”＆＃39;的子复选框出现，如果您点击“否”，则“＆＃39;否＆＃39;”的子复选框出现。

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

即。如果有人检查“是”＆＃39; ＆＃39;是＆＃39;的子复选框出现。如果他们改变主意，请点击“不”。＆＃39;是＆＃39;的子复选框消失，并且＆＃39;否＆＃39;的子复选框出现（即任何时候只能看到一组子复选框）。

我希望这是有道理的。

非常感谢任何帮助！

Answer 1

jQuery有几个内置的方法，应该对此有用。您可以使用.hide() / .show()来切换元素的可见性。您可以使用.next()定位正确的答案部分。此外，要处理“更改”事件，您可以使用.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 Fiddle demo

参考文献：

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

3 个答案: