1

以下のコードは、CSSのdisplay：noneプロパティを使用してデフォルトで非表示になっている4つのラジオボタンを示しています。ただし、「label」タグを使用して選択します。私はまた、すべてをラップするdivを持っています。

含まれているラジオボックスが選択されている場合、この「div」タグにクラスを追加/削除する方法を知りたいです。

したがって、ラジオを選択すると、親divはクラスを取得し、別のラジオが選択されると、クラスはこのdivから削除され、選択されたラジオの親divに追加されます。

<div class="plan">
   <h3 class="division-one">Division One<span>€2</span></h3>
   <div><label for="23">1 month</label><input type="radio" name="membershipPlanSID" value="23" id="23" /></div>
   <div><label for="24">3 months</label><input type="radio" name="membershipPlanSID" value="24" id="24" /></div>
   <div><label for="25">6 months</label><input type="radio" name="membershipPlanSID" value="25" id="25" /></div>
   <div><label for="26">12 months</label><input type="radio" name="membershipPlanSID" value="26" id="26" /></div>
   <input type="hidden" name="returnBackUri" value="{$returnBackUri}" />
   <input class="signup" type="submit" value="[[Sign Up:raw]]" />
</div>

私はこのようなことを試みましたが、成功しませんでした：

$('input:radio').click(function() {
if($(this).is(':checked')) {
    $(this).parent().addClass('label-selected');
} else {
    $(this).parent().removeClass('label-selected');
}
});

これを行うと、「else」にもかかわらず、クラスが削除されることはありません。

よろしくお願いします、Arky

編集：非常に速い答えをたくさんの人に感謝します！ここの素晴らしいコミュニティ:)

4

4 に答える 4

2

これを試して：

$('input:radio').click(function () {
    $('div.plan div').removeClass('label-selected');
    $(this).parent().addClass('label-selected');
});

jsFiddleの例

于 2013-03-06T21:27:17.953 に答える
1

ifイベントをトリガーする入力はチェックされたものであるため、ステートメントを使用する必要はありません。クラスを親要素に追加し、その兄弟divから削除します。div

$(function(){
    $('.plan input[type=radio]').change(function() {
       $(this).closest('div')
              .addClass('label-selected')
              .siblings('div')
              .removeClass('label-selected');              
    });
});

http://jsfiddle.net/GXdyP/

于 2013-03-06T21:24:28.583 に答える
1

問題

入力要素は、radio対応する要素の1つがクリックされた場合にのみ「チェック解除」されることに注意してください。input要素とは異なり、checkbox入力を2回クリックしてradioも、その値はクリアされません。

あなたの例ではdiv、radio入力が実際にあるため、最初のクリックでクラスを親に正常に追加していますが、同じ:checked入力の2回目のクリックでその要素が残っているため、親のクラスは削除されません。 radio:checked

解決

入力要素をクリックすると、直接の親を除くすべての要素radioからクラスが削除されます。div

例えば：

 $('.plan :radio').on('click', function() {
     var parent_div = $(this).parent().addClass('label-selected');
     $('.plan').find('div').not(parent_div).removeClass('label-selected');
 });
于 2013-03-06T21:28:15.550 に答える
0

これがチェックボックスの場合は機能しますが、クリックしたばかりのチェックボックスにのみ影響するため、他のボックスからクラスが削除されることはありません。これを試して：

$('input[type=radio]').click(function() {
        $('div.plan div').removeClass('label-selected');
        $(this).parent().addClass('label-selected');
});

これにより、必要な要素に追加する前に、他のすべての要素からクラスが削除されます。

デモ

于 2013-03-06T21:33:09.323 に答える