jQuery的 - 根据选定的单选按钮显示隐藏字段

我有几个无线电inut领域，具有特定的值，选择时，我想显示一个输入字段，所以我的代码是：jQuery的 - 根据选定的单选按钮显示隐藏字段

 <label for="adult">Adult</label> 
     <input type="radio" name="type" value="45" /> 
     <label>Number</label><input type="text" id="dob" /> 

     <label for="adult">Student</label> 
     <input type="radio" name="type" value="5" /> 
     <label>D.O.B</label><input type="text" id="dob" /> 

     <label for="adult">Child</label> 
     <input type="radio" name="type" value="5" /> 
     <label>D.O.B</label><input type="text" id="dob" />

您可以看到Student和Child按钮都有一个D.O.B字段。我需要隐藏它，并且只有在选择了所选收音机时才会显示。

我最大的问题是，两者都有相同的value（这是基于价格，这是相同的）。

我将如何定位每个特定的电台来显示D.O.B字段？我可以向每个人添加一个类/标识并以这种方式定位它们吗？

感谢

来源

2011-05-04 terrid25

你是对的...按类别访问它们 – 2011-05-04 11:18:04

ID必须是唯一的！ – 2011-05-04 11:19:11

第一：ID应该是唯一的（多个id="dob"是坏的）

要回答你的问题：给每个输入来显示/隐藏类（这里：dob）每个单选按钮，其中有一个DOB场另一个（这里：show_dob）。然后，你可以这样做：

<script type="text/js"> 
$(function() { 

    $('input.dob').hide(); // hide all first 
    $('input[type="radio"]').click(function() { 
     $('input.dob').hide(); // hide all on click 
     if($(this).hasClass('show_dob')) { // only if the radio button has a dob-field 
      $(this).nextAll('input.dob:first').show(); // show only the following first 
     } 
    }); 

}); 
</script> 

    <label for="adult">Adult</label> 
    <input type="radio" name="type" value="45" /> 
    <label>Number</label><input type="text" /> 

    <label for="adult">Student</label> 
    <input class="show_dob" type="radio" name="type" value="5" /> 
    <label>D.O.B</label><input class="dob" type="text" /> 

    <label for="adult">Child</label> 
    <input class="show_dob" type="radio" name="type" value="5" /> 
    <label>D.O.B</label><input class="dob" type="text" />

来源

2011-05-04 12:14:52 Markus

这个作品完美！ – terrid25 2011-05-04 12:38:52

查看http://api.jquery.com/category/selectors/和http：// api。 jquery.com/category/traversing/。研究一些例子，你会学会自己解决这些问题。如果你再次陷入困境，试试它并开启一个新问题，但你可以自己解决你的评论。 – Markus 2011-05-04 19:43:17

<script> 
     $(document).ready(
     function() 
     { 
      $('input').click(
      function() 
      { 
       $(this).next().next().attr('value', $(this).attr('value')); 
      }); 
     }); 
</script> 

</head> 
<body style="font-size: 62.5%;"> 
    <label for="adult">Adult</label> 
     <input type="radio" name="type" value="45" /> 
     <label>Number</label><input type="text" id="dob" /> 

     <label for="adult">Student</label> 
     <input type="radio" name="type" value="5" /> 
     <label>D.O.B</label><input type="text" id="dob" /> 

     <label for="adult">Child</label> 
     <input type="radio" name="type" value="5" /> 
     <label>D.O.B</label><input type="text" id="dob" /> 
</body>

来源

2011-05-04 11:25:42

当选择单选按钮时，不显示/隐藏输入。 – terrid25 2011-05-04 11:37:03

添加标记classesl。类=“studentVisible“和class =“childVisible“

来源

2011-05-04 11:29:58

<script> 
     $(document).ready(
     function() 
     { 
      $('input').click(
      function() 
      { 
       $("[id$='dob']").attr('value', $(this).attr('value')); 
      }); 
     }); 
</script> 

</head> 
<body style="font-size: 62.5%;"> 
    <label for="adult">Adult</label> 
     <input type="radio" name="type" value="45" /> 
     <label>Number</label> 

     <label for="adult">Student</label> 
     <input type="radio" name="type" value="5" /> 
     <label>D.O.B</label> 

     <label for="adult">Child</label> 
     <input type="radio" name="type" value="5" /> 
     <label>D.O.B</label> 
     <br /> 
     <br /> 
     <input type="text" id="dob" /> 
</body>

只有一个文本框，显示每次点击

来源

2011-05-04 12:15:40

检查了这一点：

您需要恰克小的HTML结构：

HTML

 <label for="adult">Adult</label> 
     <input type="radio" name="type" value="45" /> 
     <label class="lhidden">Number</label><input type="text" class="dob ihidden"/> 

     <label for="adult">Student</label> 
     <input type="radio" name="type" value="5" /> 
     <label class="lhidden">D.O.B</label><input type="text" class="dob ihidden"/> 

     <label for="adult">Child</label> 
     <input type="radio" name="type" value="5" /> 
     <label class="lhidden">D.O.B</label><input type="text" class="dob ihidden"/>

JQUERY

$(function() { 
    $('.ihidden,.lhidden').hide(); 
    $('input[type="radip"]').attr('checked', ''); 
    $('input[type="radio"]').click(function() { 
     $('input[type="radio"]:visible').attr('checked', ''); 
     $('.ihidden:visible, .lhidden:visible').hide(); 
     $(this).attr('checked', 'checked').next().show().next().show(); 
    }); 
});

如果不行请评论我。

来源

2011-05-04 12:27:06 thecodeparadox

这对我不起作用 – terrid25 2011-05-04 14:55:56

jQuery的 - 根据选定的单选按钮显示隐藏字段

回答

相关问题