根据单选按钮的选择显示不同的结果

Display different results based on radio button selection

本文关键字:结果 显示 选择 单选按钮      更新时间:2023-09-26

我正在使用一段JQuery来创建这个网站所描述的效果:

http://www.onextrapixel.com/2009/10/13/how-to-display-form-fields-based-on-selection-with-or-without-jquery-cookie/

我需要的是能够显示基于单选按钮选择的不同的div。我已经能够成功地实现在网站上演示的东西……但是我只能对一个选择这样做。我认为,对于5个不同的div,重复代码5次可能真的很低效。
为了简单起见,我可能会将这些div命名为数字1-5。非常感谢你的帮助!

<fieldset>
<ol class="formset">
    <li><label for="fname1">First Name: </label>
<input type="text" id="fname1" value="" name="fname1"/></li>
    <li><label for="lname1">Last Name: </label>
<input type="text" id="lname1" value="" name="lname1"/></li>
    <li><label for="email1">Email Address: </label><br />
<input type="text" id="email1" value="" name="email1" /></li>
    <li><label for="age1">Are you above 21 yrs old?</label>
<input type="radio" name="age1" value="Yes" class="aboveage1" /> Yes
<input type="radio" name="age1" value="No" class="aboveage1" /> No
<input type="radio" name="age1" value="Maybe" class="aboveage1" /> Maybe
    </li>
</ol>
<ol id="parent1" class="formset">
<li><strong>Parent/Guardian Information:</strong></li>
    <li><label for="pname1">Parent Name: </label>
<input type="text" id="pname1" value="" name="pname1"/></li>
    <li><label for="contact1">Contact No.: </label>
<input type="text" id="contact1" value="" name="contact1"/></li>
</ol>
<input type="submit" name="submit" value="Submit" class="submitbtn" />
</fieldset>
当前代码:

$(document).ready(function() { 
    $("#parent1").css("display","none");
    $(".aboveage1").click(function() { 
        if ($('input[name=age1]:checked').val() == "No" ) {
            $("#parent1").slideDown("fast"); //Slide Down Effect 
        } 
        else {
            $("#parent1").slideUp("fast"); //Slide Up Effect 
        }
    });
});

如果您想滑动与您的平均值匹配的不同答案的元素,并且div具有与答案值相同的id,您可以执行以下操作:

注意:你必须重命名你的div对应的答案从formset到子formset为了工作

$(document).ready(function() { 
    $('ol.sub-formset').css("display","none"); // display none on all ol that doesn't have formset class
    $('input[class^="aboveage"]').click(function() { 
        $('ol[class!="formset"]').slideUp("fast"); //Slide Up Effect 
        $('#' + $(this).val()).slideDown("fast"); //Slide Down Effect 
    });
});

工作示例:http://jsfiddle.net/L5qfn/