单击单选按钮时使用jquery显示多个div
单击单选按钮时使用jquery显示多个div
提问于 2015-03-24 14:55:27
我有个问题。单击不同的单选按钮时，我想显示不同的输入字段。单击1时，应该会出现Telephone1字段。当你点击2，Telephone1和电话2都应该出现，最后当你点击3时，所有三个输入字段都会出现。我刚在jquery工作，不知道怎么做。以下是我的HTML代码：
<html>
<head>
<title>JQuery tests</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
</head>
<body>
<h1>JQuery tests</h1>
<form>
<label>Telephone: <em>*</em></label>
<input type="radio" name="Telephone" value="telephone1" />1
<input type="radio" name="Telephone" value="telephone2" />2
<input type="radio" name="Telephone" value="telephone3" />3
<br/><br/>
<div id="Telephone1" style="display:none">
telephone1: <input type="text" name="reference"/>
</div>
<div id="Telephone2" style="display:none">
telephone2: <input type="text" name="reference"/>
</div>
<div id="Telephone3" style="display:none">
telephone3: <input type="text" name="reference"/>
</div>
</form>
<script type="text/javascript">
$("input[name='Telephone']:radio")
.change(function() {
$("#Telephone1").toggle($(this).val() == "telephone1");
$("#Telephone2,").toggle($(this).val() == "telephone2".val()=="telephone1");
$("#Telephone3").toggle($(this).val() == "telephone3");
});
</script>
</body>谢谢
回答 1
Stack Overflow用户
回答已采纳
发布于 2015-03-24 15:11:10
解决这一问题的方法有多种，但我通常侧重于选择：
JSFiddle: http://jsfiddle.net/TrueBlueAussie/zefsszom/
$("input[name='Telephone']:radio").change(function () {
$('.telephone').hide(); // Hide them all
switch ($(this).val()) {
case "telephone1":
$("#Telephone1").show();
break;
case "telephone2":
$("#Telephone1,#Telephone2").show();
break;
case "telephone3":
$('.telephone').show();
break;
}
});注意：我添加了一个公共类，以使隐藏/显示所有电话输入更容易。
通常，我倾向于数据驱动这类场景：
例如，将选择器放在值中：
</label>
<input type="radio" name="Telephone" value="#Telephone1" />1
<input type="radio" name="Telephone" value="#Telephone1,#Telephone2" />2
<input type="radio" name="Telephone" value="#Telephone1,#Telephone2,#Telephone3" />3
<br/>然后，代码简化为如下所示：
$("input[name='Telephone']:radio").change(function () {
var selection = $($(this).val());
$('.telephone').not(selection.show()).hide();
});JSFiddle: http://jsfiddle.net/TrueBlueAussie/zefsszom/1/
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/29235837
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号