Question

我有一个问题。我想在单击不同的单选按钮时显示不同的输入字段。当您单击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"/>&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>

感谢

Answer 1

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

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;

    }
});

注意：我添加了一个公共类，可以更轻松地隐藏/显示所有电话输入。

我经常倾向于数据驱动这种情况：

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

然后代码简化为：

$("input[name='Telephone']:radio").change(function () {
    var selection = $($(this).val());
    $('.telephone').not(selection.show()).hide();
});

JSFiddle： http://jsfiddle.net/TrueBlueAussie/zefsszom/1/

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

1 个答案: