選擇一個單選按鈕後顯示一個div

-1

我有這個代碼，我需要的是當選擇一個單選按鈕我想顯示subscription_rate div。目前這兩個主DIV一起顯示。我需要在單擊單選按鈕時隱藏subcription_rate div。選擇一個單選按鈕後顯示一個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>

來源

2013-01-22 TNK

您需要change事件處理程序綁定單選按鈕，並使用show()/hide()功能。

Live Demo

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

要radion按鈕的變化之間的toogle，您可以使用toogle()

Live Demo

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

來源

2013-01-22 06:24:11 Adil

我需要隱藏subscription_rate div再次點擊選定的電臺對接在......我知道這有可能嗎？ – TNK

您可以使用toogle，查看我更新的答案。 – Adil

我可以使用slideDown（）在toggle（）中添加一些動畫嗎？ – TNK

首先隱藏在CSS股利：

display:none;

然後使用這個腳本：在jQuery的使用.hide()

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

來源

2013-01-22 06:27:29 Jai

你能告訴我如何我用slowDown（）慢速..我嘗試類似.slideDown（{默認：800}）;但它不工作.. – TNK

只是更新了答案。 – Jai

首先隱藏它，並使用.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 demo

來源

2013-01-22 06:38:02 Swarne27

當它顯示和隱藏時，我可以添加淡入淡出效果嗎？ – TNK

當然可以，而不是.show（）使用.fadeIn（「slow」）;管他呢。我已將它添加到jsfiddle的答案 – Swarne27

我需要隱藏它，當我點擊已經選中的單選按鈕時？可能嗎？ – TNK

選擇一個單選按鈕後顯示一個div

回答

相關問題