Jquery 使用选中的单选按钮切换DIV

我正试图根据

单选按钮的选择来切换
DIV
。这是我的代码

<div class="form-element-row">
    <div class="first-child">
        <label for="name">Registration Period :</label>
    </div>
    <div class="last-child">
        <input type="radio"  name="period"  value="1" />1 Year
        <input type="radio"  name="period"  value="2" />2 Years
        <input type="radio"  name="period"  value="3" />3 Years                             
    </div>
</div>

<div class="subscription_rate">
    <div class="first-child">
        <label>&nbsp;</label>
    </div>
    <div class="last-child">
        <table>
          <tr>
            <th>Subscription Rate</th>
            <th>1 Year</th>
            <th>2 Years</th>
            <th>3 Years</th>
          </tr>
          <tr>
            <td>Rates for subscription period.</td>
            <td>$ 3000</td>
            <td>$ 4500</td>
            <td>$ 7500</td>
          </tr>
        </table>
    </div>
</div>

这对我有用，但有个问题。。在这里，我只需要点击选中的
单选按钮
。这段代码适用于每个按钮。。这意味着我只想选择下一个单选按钮，然后向下切换DIV。我需要做的是始终选择一个单选按钮，我需要向上切换
DIV

谁能告诉我怎么做。。
谢谢。
我不确定这是否是您想要的，但这可能会有所帮助：

$(document).ready(function (){
$('.subscription_rate').hide(); // hide the div first
 $('input[type=radio]').click(function(){
    if($('input[type=radio]:checked')){
        $('.subscription_rate') .show('slow') // show it when user clicks the radio buttons
    }else{
        $('.subscription_rate') .fadeOut("slow");  // if in any case radio button is not checked by user hide the div
        }
});})

此代码将完成所需的功能

    $('.subscription_rate').hide();
 $('input[type=radio]').click(function(){
     if($('input[type=radio]:checked') && $(this).attr('value')==1){
         if(!($('.subscription_rate').is(':visible'))){
             $('.subscription_rate').slideToggle('slow')
         }
     }else if($('input[type=radio]:checked') && $(this).attr('value')==2){
         $('.subscription_rate') .fadeOut("slow");
     }
    else if(!($('.subscription_rate').is(':visible'))){
       $('.subscription_rate').slideToggle('slow');
     }
});

单选按钮1和3将始终使div可见，2将始终隐藏div

var i = 0;
$('.subscription_rate').hide(); // hide the div first
 $('input[type=radio]').click(function(){
     if(i==0) {
         $(this).addClass("active");
         $(".subscription_rate").slideDown();
         i++;
     }
     else {
     if($(this).hasClass("active")) {
         $(".subscription_rate").slideToggle();
     }
     else {
         $(".active").removeClass("active");
         $(this).addClass("active");
         $(".subscription_rate").show().fadeOut().fadeIn();
     }
     }
});


您可以添加“活动”类，下次如果用户单击该类，它将检测该类是否为“活动”类。
这应该是一个简单的解决方案，如果选中该类，请将其向上滑动，否则将其淡出。这样，如果您通过代码更改它，它应该具有相同的效果（单选按钮不能在单击时“全部取消选择”，只能通过代码更改）

$('.subscription_rate').hide(); // hide the div first
$('input[type=radio]').change(function () {
    if ($(this).is(':checked')) {
        $('.subscription_rate').slideDown("slow");
    } else {
        $('.subscription_rate').fadeOut('slow');
    }
});

编辑：

下面是一个工作示例：-注意它是
slideDown
not toggleDown-并且您可以使用所需的
slideUp
-文档：

编辑2：

1如果已经选择了它，并且您单击了它，则会在切换上显示/隐藏div/文本

2如果尚未选择它（选择新选项），它将隐藏它（div文本）

3任何文本的初始选择都不会显示文本，但一旦选择并再次单击，将显示文本

$('.subscription_rate').hide(); // hide the div first
$('input[type=radio]').change(function () {
    if ($(this).is(':checked') && $(this).hasClass("activeSelection")) {
        $('.subscription_rate').slideToggle("slow");
    } else {
        $('input[type=radio]').removeClass("activeSelection");
        $(this).addClass('activeSelection');
        $('.subscription_rate').fadeOut('slow');
    }
});

请注意：
我想您希望每个单选按钮分别显示每个元素？如果是这样，此代码可以工作，您可以在下面的

我将类添加到各个元素中以单独控制它们：

<tr>
  <th>Subscription Rate</th>
  <th class="toggle 1yr">1 Year</th>
  <th class="toggle 2yr">2 Years</th>
  <th class="toggle 3yr">3 Years</th>
</tr>

如果你想让表格元素看起来漂亮并有漂亮的过渡，我建议不要使用它们。
你想用一个单选按钮使div始终可见，另一个使其始终隐藏而不切换？这就是你想要的吗？你想淡出（）或滑出（）吗？现在，当您单击其他按钮时，请查看该好友和另一个问题，您希望它向下滑动还是保持原样？第一次再次工作。然后我需要单击两次以在第二次中向上切换。让我们了解此代码不按我的预期方式工作。当选中“下一步”按钮时，它会向下切换div（例如，如果有3个单选按钮），您对这三个按钮的要求是什么。如果这不是所需的效果，请用更多细节/对所需结果的清晰解释重新分类您的问题，我们当然可以为您提供帮助！我需要将效果上下切换添加到仅选中的按钮。当我选中新按钮时，它应该向上切换
<tr>
  <th>Subscription Rate</th>
  <th class="toggle 1yr">1 Year</th>
  <th class="toggle 2yr">2 Years</th>
  <th class="toggle 3yr">3 Years</th>
</tr>

$('.subscription_rate').hide(); // hide the div first
$('input[type=radio]').click(function () {
  $('.subscription_rate').show();
  $('.toggle').hide(); // if in any case radio button is not checked by user hide the div
  $('.' + $(this).val() + 'yr').show();
});