根据单选按钮的选择显示不同的结果
Display different results based on radio button selection
我正在使用一段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/
相关文章:
- 如何将JavaScript结果显示为段落
- 敲除:可观察数组没有被正确绑定——只有1个结果显示,而api返回6
- 我的localStorage结果显示了[null,null,“something”]],而不是“”;什么”;
- 将咖啡转换为javascript,并将结果显示在Emacs中的标准输出中
- json结果显示第一个值
- 我该如何在旅途中添加一些段落,并将结果显示在带有段落标记的文档中
- 如何将搜索结果显示为“搜索结果”;显示300〃中的1-10〃;
- 为什么'谷歌分析内容实验结果显示
- 如何在Meteor中将多个数据库的结果显示为列表格式
- AJAX 没有接收有关成功的数据,它将结果显示为“未定义”
- J查询结果显示问题
- 谷歌地图(它没有将结果显示到我的输入窗格中以保存到我的数据库中)
- Ajax 结果显示未定义
- 配置谷歌分析_TrackEvent,以便结果显示在基本报告中
- 如何将 2 小时添加到当前日期时间并将结果显示回日期时间
- 单击后如何获取值文本作为结果按钮的结果 显示 按钮
- 过滤结果以显示与ng匹配的结果显示angular js
- 为什么json结果显示一个属性的NaN
- JavaScript-结果显示在IE,但不是Chrome或FF
- 将PHP/MySQLi结果显示为HTML表