单击单选按钮时使用jquery显示多个div_Jquery_Html

单击单选按钮时使用jquery显示多个div

jquery html

单击单选按钮时使用jquery显示多个div,jquery,html,Jquery,Html,我有个问题。我想在单击不同的单选按钮时显示不同的输入字段。单击1时，应显示电话1字段。当你点击2时，电话1和电话2都会出现最后，当你点击3时，三个输入框都会出现。我是jquery的新手，不知道怎么做。以下是我的HTML代码： <html> <head> <title>JQuery tests</title> <script type="text/javascript" src="http://ajax.googleapis.com/

我有个问题。我想在单击不同的单选按钮时显示不同的输入字段。单击1时，应显示电话1字段。当你点击2时，电话1和电话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"/>&nbsp;&nbsp;&nbsp;&nbsp;
</div>

<div id="Telephone2" style="display:none">
  telephone2: <input type="text" name="reference"/>&nbsp;&nbsp;&nbsp;&nbsp;
</div>
&nbsp;&nbsp;&nbsp;&nbsp;
<div id="Telephone3" style="display:none">
  telephone3: <input type="text" name="reference"/>&nbsp;&nbsp;&nbsp;&nbsp;
</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>


JQuery测试
JQuery测试
电话：*
1.
2.
3.



电话1：
电话2：
电话3：
$（“输入[name='Telephone']：收音机”）
.change（函数（）{
$（“#电话1”）.toggle（$（this.val（）==”电话1”）；
$（“#电话2”）.toggle（$（this.val（）=”电话2.val（）=”电话1”）；
$（“#电话3”）.toggle（$（this.val（）=”电话3”）；
});

谢谢

解决这个问题的方法有多种，但我通常关注的是选择：

JSFiddle:

注意：我添加了一个公共类，使隐藏/显示所有电话输入变得更容易

我通常倾向于数据驱动这类场景：

e、 g.将选择器放入值中：

</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/>

JSFiddle:

很高兴这有帮助。尽可能使用第二种数据驱动设置。如果可以的话，请接受我的回答。谢谢

</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();
});