-1

私はこのコードを持っています。これで必要なのは、subscription_rate div を表示したいラジオ ボタンを 1 つ選択するときです。現時点では、両方のメイン 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>
4

3 に答える 3

1

changeイベントハンドラーをラジオボタンでバインドし、 show()/hide()関数を使用する必要があります。

ライブデモ

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

ラジオンボタンの変更を切り替えるには、toogle（）を使用できます。

ライブデモ

$('.subscription_rate').hide();
$('[name=period]').change(function(){
  $('.subscription_rate').toggle();    
});
于 2013-01-22T06:24:11.323 に答える
1

最初に CSS で div を非表示にします。

display:none;

次に、このスクリプトを使用します。

$('input[name="period"]').change(function(){
  $('.subscription_rate').slideDown('slow'); // .slideDown(800);
});
于 2013-01-22T06:27:29.023 に答える
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 デモ

于 2013-01-22T06:38:02.550 に答える