javascript - 选择单选按钮后显示 div

Question

我有此代码，而我需要的是选择一个单选按钮时我要显示subscription_rate 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>

Answer 1

首先通过.hide()在jquery中使用隐藏它，并.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
            }
    });
});

JSFIddle 演示

Answer 2

您需要将change事件处理程序与单选按钮绑定并使用show()/hide()功能。

现场演示

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

要在单选按钮更改之间切换，可以使用toogle()

现场演示

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

Answer 3

首先隐藏css中的div：

display:none;

然后使用这个脚本：

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