使用JQuery和3个单选按钮来显示/展开不同的HTML

问题描述

|| 我需要帮助来扩展此页面上的jquery脚本，以创建一组三个单选按钮，每个按钮在选定时都会显示/展开不同的html。 上面链接页面中的教程和提供的脚本是为一组两个单选按钮编写的。这是本教程的html示例，其中包含两个单选按钮，分别是“是”和“否”，当选择“否”时，将显示

id=\'parent2\'

的html：

//Example 2: Display Fields Based On Selected Radio Button With jQuery Cookie
<fieldset></p>
<ol class=\"formset\">
        <li><label for=\"fname2\">First Name: </label>
    <input type=\"text\" id=\"fname2\" value=\"\" name=\"fname2\"/></li>
        <li><label for=\"lname2\">Last Name: </label><br />
    <input type=\"text\" id=\"lname2\" value=\"\" name=\"lname2\"/></li>
        <li><label for=\"email2\">Email Address: </label><br />
    <input type=\"text\" id=\"email2\" value=\"\" name=\"email2\" /></li>
        <li><label for=\"age2\">Are you above 21 yrs old?</label><br />
    <input type=\"radio\" name=\"age2\" value=\"Yes\" class=\"aboveage2\" /> Yes
    <input type=\"radio\" name=\"age2\" value=\"No\" class=\"aboveage2\" /> No</li>
</ol>
<ol id=\"parent2\" class=\"formset\">
        <li><strong>Parent/Guardian Information:</strong></li>
        <li><label for=\"pname2\">Parent Name: </label>
    <input type=\"text\" id=\"pname2\" value=\"\" name=\"pname2\"/></li>
        <li><label for=\"contact2\">Contact No.: </label><br />
    <input type=\"text\" id=\"contact2\" value=\"\" name=\"contact2\"/></li>
</ol>
<input type=\"submit\" name=\"submit\" value=\"Submit\" class=\"submitbtn\" />
</fieldset>

这是隐藏和显示/展开

\'parent2\'

中的html，并将

parent2

展开或折叠状态写入cookie的jquery（用于重新加载表单时）。

$(document).ready(function(){
    $(\"#parent2\").css(\"display\",\"none\");
        $(\".aboveage2\").click(function(){
        if ($(\'input[name=age2]:checked\').val() == \"No\" ) {
            $(\"#parent2\").slideDown(\"fast\"); //Slide Down Effect
            $.cookie(\'showTop\',\'expanded\'); //Add cookie \'ShowTop\'
        } else {
            $(\"#parent2\").slideUp(\"fast\");  //Slide Up Effect
            $.cookie(\'showTop\',\'collapsed\'); //Add cookie \'ShowTop\'
        }
     });
        var showTop = $.cookie(\'showTop\');
        if (showTop == \'expanded\') {
        $(\"#parent2\").show(\"fast\");
        $(\'input[name=age2]:checked\');
      } else {
        $(\"#parent2\").hide(\"fast\");
        $(\'input[name=age2]:checked\');
      }
});

我的问题是尝试使用一组三个单选按钮，例如带有选项“是”，“可能”和“否”的按钮，每个按钮在单击时都会显示不同的html（并隐藏先前选择的选项\的html（如果有的话）。 我的解决方案是尝试使用if，else if，else语句包装现有的if，else语句，该语句类似于上面教程中的代码。但这不是解决此问题的正确方法，或者我错误地使用了语句语法。 有人可以建议正确的方法吗？     

解决方法

        这是否满足您的要求：http://jsfiddle.net/8p7J2/2/     ,        有很多方法可以做到这一点……很难说任何一种方法都是“正确的”……但是我可以给你一个小而简洁的可能性： 首先，查看我在jsfiddle.net上放在一起的运行示例：http://jsfiddle.net/hPPqc/ 标记：

<div><input type=\'radio\' name=\'opt\' value=\'1\' /> Option 1</div>
<div><input type=\'radio\' name=\'opt\' value=\'2\' /> Option 2</div>
<div><input type=\'radio\' name=\'opt\' value=\'3\' /> Option 3</div>
<div class=\'info\' id=\'info1\'>Option 1 Info</div>
<div class=\'info\' id=\'info2\'>Option 2 Info</div>
<div class=\'info\' id=\'info3\'>Option 3 Info</div>

Javascript：

var update = function() {
    $(\".info\").hide();
    $(\"#info\" + $(this).val()).show();
};

$(\"input[type=\'radio\']\").change(update);

CSS：

.info { display: none; }

说明： 在这里，我们有几个收音机，每个收音机都有一个关联的“ info” div。 为了使每个收音机与每个信息框相关联，我决定将收音机的值作为相关信息框名称的一部分（值为value = \'1 \'的收音机与名为\“ info1的信息框相关联\“） 显然，这可以通过多种方式来完成...包括div上的自定义属性，手动等等。 默认情况下，我通过为所有信息框提供一个类（\“ info \”）来隐藏所有信息框，该类在css中指定\“ display：none \”。 最后，我使用javascript连接了所有收音机的更改标准。此方法重新隐藏所有\“ info \”框，并根据所选收音机的值专门显示我想要的框。 如果您还有其他需要，请告诉我。 谢谢