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

【问题标题】：Show/hide certain sections of a form using JavaScript. How to only show one section at a time?使用 JavaScript 显示/隐藏表单的某些部分。如何一次只显示一个部分？
【发布时间】：2012-09-28 14:05:18
【问题描述】：

我有以下设置：

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

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

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

我希望这是有道理的。

任何帮助将不胜感激！

【问题讨论】：

标签： javascript jquery forms show-hide jquery-events

【解决方案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();
    });
});

【讨论】：

这看起来不错，但似乎不适合我。仅显示“是”、“否”和“不确定”复选框。似乎没有显示/隐藏子复选框。
@ade123 抱歉，我误读了您的部分 HTML。固定的！看看我的更新
感谢 nbrooks，这正在工作。我已将 .hide 和 .show 更改为 .slideUp 和 .slideDown。似乎工作正常。您会建议这样做还是最好将其保留为隐藏/显示？干杯:)
@ade123 没关系，这只是一个偏好问题。很高兴为您提供帮助！

【解决方案2】：

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

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

JS Fiddle demo.

参考资料：

【讨论】：

【解决方案3】：

以下是我的处理方法：

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

【讨论】：