3

DIVの選択に応じてを切り替えようとしていますradio buttons。これが私のコーディングです。

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

これは私にとってはうまくいっていますが、問題があります。ここでは、選択したをクリックするだけで切り替える必要がありますradio button。このコードを使用すると、すべてのボタンで機能します。つまり、次のラジオボタンを選択してから、DIVを切り替えます。これで行う必要があるのは、常に、を切り替える必要のあるラジオボタンを選択していることDIVです。

誰かが私にこれをどのように行うことができるか教えてもらえますか..ありがとう。

4

5 に答える 5

1

これは簡単な解決策であるはずです。チェックされている場合は上にスライドし、そうでない場合はフェードアウトします。そうすれば、コードを介して変更した場合でも、同じ効果が得られるはずです（ラジオボタンは、コードを介してのみ、クリック時に「すべての選択を解除」することはできません。

$('.subscription_rate').hide(); // hide the div first
$('input[type=radio]').change(function () {
    if ($(this).is(':checked')) {
        $('.subscription_rate').slideDown("slow");
    } else {
        $('.subscription_rate').fadeOut('slow');
    }
});

編集：

これが実際の例のフィドルです：http：//jsfiddle.net/AVgzW/-toggleDownではないことに注意してくださいslideDown-そしてそれを使用することができますslideUp-ドキュメント：http ：//api.jquery.com/category/effects //

EDIT2：

1すでに選択されている状態でクリックすると、トグルでdiv/textが表示/非表示になります。

2まだ選択されていない場合（新しいオプションを選択）、非表示にします（divテキスト）

3 ANYを最初に選択すると、テキストは表示されませんが、選択してもう一度クリックすると表示されます。

$('.subscription_rate').hide(); // hide the div first
$('input[type=radio]').change(function () {
    if ($(this).is(':checked') && $(this).hasClass("activeSelection")) {
        $('.subscription_rate').slideToggle("slow");
    } else {
        $('input[type=radio]').removeClass("activeSelection");
        $(this).addClass('activeSelection');
        $('.subscription_rate').fadeOut('slow');
    }
});

そのためのフィドル：http： //jsfiddle.net/AVgzW/1/

于 2013-01-22T14:55:10.600 に答える
1

このコードは必要な機能を実行します。

    $('.subscription_rate').hide();
 $('input[type=radio]').click(function(){
     if($('input[type=radio]:checked') && $(this).attr('value')==1){
         if(!($('.subscription_rate').is(':visible'))){
             $('.subscription_rate').slideToggle('slow')
         }
     }else if($('input[type=radio]:checked') && $(this).attr('value')==2){
         $('.subscription_rate') .fadeOut("slow");
     }
    else if(!($('.subscription_rate').is(':visible'))){
       $('.subscription_rate').slideToggle('slow');
     }
});

ラジオボタン1と3は、常にdivを表示し、2は常にdivを非表示にします。

于 2013-01-22T14:50:20.937 に答える
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();
     }
     }
});

ワーキングフィドル

クラス「アクティブ」を追加できます。次にユーザーがクリックすると、クラス「アクティブ」があるかどうかが検出されます。

于 2013-01-22T14:52:16.510 に答える
1

各ラジオボタンに各要素を個別に表示したいと思いますか？もしそうなら、このコードは機能し、このフィドルでそれをチェックすることができます

個々の要素にクラスを追加して、それらを個別に制御しました。

<tr>
  <th>Subscription Rate</th>
  <th class="toggle 1yr">1 Year</th>
  <th class="toggle 2yr">2 Years</th>
  <th class="toggle 3yr">3 Years</th>
</tr>

このjsは、選択したラジオボタンに関連するアイテムのみを表示します。

$('.subscription_rate').hide(); // hide the div first
$('input[type=radio]').click(function () {
  $('.subscription_rate').show();
  $('.toggle').hide(); // if in any case radio button is not checked by user hide the div
  $('.' + $(this).val() + 'yr').show();
});

テーブル要素の見栄えを良くし、トランジションを凝らしたい場合は、テーブル要素を使用しないことをお勧めします。

于 2013-01-22T14:58:15.013 に答える
0

これがあなたが探しているものであるかどうかはわかりませんが、これは役立つかもしれません：

$(document).ready(function (){
$('.subscription_rate').hide(); // hide the div first
 $('input[type=radio]').click(function(){
    if($('input[type=radio]:checked')){
        $('.subscription_rate') .show('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
        }
});})
于 2013-01-22T14:49:21.733 に答える