jquery - 使用选中的单选按钮切换 DIV

Question

我正在尝试根据单选按钮的选择来切换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>

这是jquery

$('.subscription_rate').hide(); // hide the div first
 $('input[type=radio]').click(function(){
    if($('input[type=radio]:checked')){
        $('.subscription_rate') .slideToggle('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
        }
});

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

谁能告诉我我该怎么做..谢谢。

Answer 1

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();
     }
     }
});

Working Fiddle

您可以添加“active”类，下次用户单击时将检测它是否具有“active”类。