3

我有以下设置：

<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 个复选框可见（是、否、不确定）。当您单击“是”时，会出现“是”的子复选框，如果您单击“否”，则会出现“否”的子复选框。

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

即，如果有人选中“是”，则会出现“是”的子复选框。如果他们随后改变主意并单击“否”，则“是”的子复选框会消失，而“否”的子复选框会出现（即，任何时候都只能看到一组子复选框）。

我希望这是有道理的。

任何帮助将不胜感激！

4

3 回答 3

4

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

$(document).ready(function() {
    $('input[name="answer"]').change(function() {
        $(".answers").hide();
        $('input[name="answer"]:checked')
            .closest(".question")
            .next(".answers")
            .show();
    });
});
于 2012-10-08T10:23:35.243 回答
0

以下是我将如何处理这个问题：

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

于 2012-10-08T10:48:32.843 回答
0

鉴于您的 HTML，我能想到的最简单的方法：

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

JS 小提琴演示。

参考：

于 2012-10-08T10:52:11.733 回答