Javascript 选择单选按钮后显示div

我有这个代码，我需要做的是，当我选择一个单选按钮时，我想显示订阅率div。目前，两个主要div一起显示。单击单选按钮时，我需要保持隐藏subcription_rate div

希望有人能帮我解决这个问题

这是我到目前为止的代码

<div class="form-element-row">
    <div class="first-child">
        <label for="name">Registration Period<img alt="required" src="images/required_star.png" />:</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 Year                              
    </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 style="text-align: left;">Lanka Institute Rates for Tutors within their subscription period.</td>
            <td width="18%">Rs.3000</td>
            <td width="18%">Rs.4500<br /><span>Save 25%</span></td>
            <td width="18%">Rs.7500<br /><span>Save 50%</span></td>
          </tr>
        </table>
    </div>
</div>

注册期限：
一年
两年
三年
订阅率
一年
两年
三年
兰卡学院在其订阅期内支付导师费用。
3000卢比
4500卢比
节省25%
7500卢比
节省50%

您需要使用单选按钮绑定

更改事件处理程序，并使用
show（）
/
hide（）
函数


要在更改radion按钮之间切换，可以使用


$('.subscription_rate').hide();
$('[name=period]').change(function(){
  $('.subscription_rate').toggle();    
});

首先在css中隐藏div：

显示：无

然后使用以下脚本：

$('input[name="period"]').change(function(){
  $('.subscription_rate').slideDown('slow'); // .slideDown(800);
});

首先在jquery中使用
.hide（）
隐藏它，当用户单击单选按钮后要显示它时，请使用
.show（）

$(document).ready(function(){
     $('.subscription_rate').hide(); // hide the div first
     $('input[type=radio]').change(function(){
        if($('input[type=radio]:checked').val()==1){ //check which radio button is clicked, here its 1
            $('.subscription_rate').hide();
        }else if($('input[type=radio]:checked').val()==2){
            $('.subscription_rate').fadeIn("slow"); // show the div with fadeIn
        }else if($('input[type=radio]:checked').val()==3){
            $('.subscription_rate').hide();
        }else{
            $('.subscription_rate').hide(); // if in any case radio button is not checked by user hide the div
            }
    });
});

我可以在显示和隐藏时添加fadein淡出效果吗？当然可以使用.fadein（“慢”）代替.show（）使用；或者别的什么。我已经在回答中把它添加到了JSFIDLE中，当我点击单选按钮时需要隐藏它，而单选按钮已经选中了一个？有可能吗？您可以按自己的方式隐藏或显示任何内容，但在您的问题中，您说过要显示最初隐藏的div，您想做什么？单击周期值为1的单选按钮时是否要隐藏div？单击周期值为2的单选按钮时是否要显示div？我需要再次隐藏订阅率div单击所选单选按钮。。。我能知道这是可能的吗？我能在toggle（）中使用slideDown（）来添加一些动画吗？让我们说一声我对toggle（）有一个问题我想你偏离了你的操作，如果你提出新问题会更好你能告诉我我如何以慢速使用slideDown（）。。我尝试了类似.slideDown（{default:800}）的方法；但是它不起作用。。
$(document).ready(function(){
     $('.subscription_rate').hide(); // hide the div first
     $('input[type=radio]').change(function(){
        if($('input[type=radio]:checked').val()==1){ //check which radio button is clicked, here its 1
            $('.subscription_rate').hide();
        }else if($('input[type=radio]:checked').val()==2){
            $('.subscription_rate').fadeIn("slow"); // show the div with fadeIn
        }else if($('input[type=radio]:checked').val()==3){
            $('.subscription_rate').hide();
        }else{
            $('.subscription_rate').hide(); // if in any case radio button is not checked by user hide the div
            }
    });
});