Question

我需要帮助在this page上扩展一个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>

这是jquery隐藏和显示/扩展'parent2'中的html并将parent2的展开或折叠状态写入cookie（用于重新加载表单时）。

$(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语句，类似于上面教程中的代码。但这不是解决此问题的正确方法，或者我错误地使用了语句语法。

有人可以建议正确的方法吗？

Answer 1

有很多方法可以做到这一点......并且很难说任何一种方式都是“正确的”......但我可以给你一个小而简洁的可能性：

首先，查看我在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; }

阐释：

这里我们有几个无线电，每个都有一个相关的“信息”div。

要将每个收音机与每个信息框相关联，我决定将收音机的值作为相关信息框名称的一部分（值为'1'的收音机与名称为“info1”的信息框相关联）

显然，这可以通过多种方式完成......包括div上的自定义属性，手工等等。

我默认隐藏所有信息框，给它们一个类（“info”），在css中指定“display：none”。

最后，我使用javascript将所有无线电的更改标准联系起来。此方法重新隐藏所有“信息”框，并根据所选的无线电值特别显示我想要的那个。

如果您还有其他需要，请告诉我。

由于

Answer 2

这是否符合您的要求：http://jsfiddle.net/8p7J2/2/

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

2 个答案: