Question

我有三个文本框和收音机。我想如果选中相应的单选按钮，则只有文本字段可见。请帮忙。

<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>Phone
<input type="text" name="phone" id="phone"/>    

<input type="radio" name="optionsRadios" id="optionsRadios2" value="option1">SMS
<input type="text" name="sms" id="sms"/>

<input type="radio" name="optionsRadios" id="optionsRadios2" value="option1">Others
<input type="text" name="others" id="others"/>

Answer 1

我会将您的输入包装在一个容器中（从长远来看，它使JS和CSS更容易），然后您可以使用click()函数来查看哪一个＆＃34;已检查＆＃34;，显示输入并隐藏其他输入：

FIDDLE

<强> JS

$("input[type=radio]").change(function(){
   if( $(this).is(":checked") ){
      $(this).next().show().closest(".wrapper").siblings(".wrapper").find("input[type=text]").hide();
   };    

});

<强> HTML

<div class="wrapper">
   <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1"/>Phone
   <input type="text" name="phone" id="phone"/>    
</div>
<div class="wrapper">
   <input type="radio" name="optionsRadios" id="optionsRadios2" value="option1"/>SMS
   <input type="text" name="sms" id="sms"/>
</div>
<div class="wrapper">
   <input type="radio" name="optionsRadios" id="optionsRadios2" value="option1"/>Others
   <input type="text" name="others" id="others"/>
</div>

Answer 2

这样的事情？ http://jsfiddle.net/swm53ran/104/

$(document).ready(function() {
    $('.radio').on('change', function() {
        $('input[type=text]').hide();
        $(this).closest('.group').find('input[type=text]').show();
    });
});

<div class="group">
    <input class="radio" type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked />Phone
    <input type="text" name="phone" id="phone"/>
</div>

<div class="group">
    <input class="radio" type="radio" name="optionsRadios" id="optionsRadios2" value="option2" />SMS
    <input type="text" name="sms" id="sms" style="display:none;"/>
</div>
<div class="group">
    <input class="radio" type="radio" name="optionsRadios" id="optionsRadios3" value="option3"/>Others
    <input type="text" name="others" id="others" style="display:none;"/>
</div>

我在收音机和文本框对周围放了一个容器，剩下的就是jquery类和选择器功能

单选按钮选中事件时，文本字段可见true或false

2 个答案: