jquery单选按钮显示/隐藏答案

【问题标题】：jquery radio button show / hidejquery单选按钮显示/隐藏
【发布时间】：2011-06-30 05:34:48
【问题描述】：

我有 3 个单选按钮。
*如果单击电子邮件按钮将仅显示电子邮件文本框
*如果点击集合将只显示集合文本框并隐藏其他 div。我怎么做？下面的代码在更改后似乎只显示而不隐藏！

<input type="radio" name="d_method" class="c_email"/>Email   
<input name="d_method" type="radio" class="c_collection"/>Colletion 
<input name="d_method" type="radio" class="c_post"/>Post

和 3 个带有 id 的隐藏 div：

<div id="c_email" style="display:none;">
  email textbox
</div>
<div id="c_collection" style="display:none;">
  collection textbox
</div>
<div id="c_post" style="display:none;">
  post textbox
</div>

和jquery：

$('.c_email').change(function() {
        $('#c_email').stop().fadeIn();
    }, function(){
        $('#c_email').stop().hide();
    })
    $('.c_collection').change(function() {
        $('#c_collection').stop().fadeIn();
    }, function(){
        $('#c_collection').stop().hide();
    })
    $('.c_post').change(function() {
        $('#c_post').stop().fadeIn();
    }, function(){
        $('#c_post').stop().hide();
    })

【问题讨论】：

标签： jquery radio-button

【解决方案1】：

你可以这样做

$(':radio').change(function() {
    var itemSelector = '#' + $(this).attr('class');
    $('div').stop().fadeOut(function() {
        $(itemSelector).fadeIn();
    });
});

这一切都基于您的约定，即类名与您的 id <div> 相同

【讨论】：