2

これは多くの人にとって簡単すぎるように聞こえるかもしれませんが、私はこれを自分で理解することはできません。私は欠けているものを理解できません。

ペアでグループ化されたラジオボタンのセットがあります。各ペアは、オプトイン/オプトアウトセクションに対応しています。

.active必要なのは、のクラスを切り替えること<label>です。

これが私の基本的なHTMLです。

<td class="btn opt-in">
  <label>
    <input type="radio" name="radio1" value="radio1">
  </label>
</td>
<td class="btn opt-out">
   <label>
     <input type="radio" name="radio1" value="radio2">
   </label>
</td>

これが私のJavaScriptです（部分的に機能します）：

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

上記のスクリプトを使用すると、クラスをラベルに問題なく追加できますが、削除/切り替えはできません。

これが参考のためのフィドルです。

どんな助けでも大歓迎です。

4

2 に答える 2

13

あなたが特定をクリックした場合input:radioは常にcheckedです。

代わりにこれを使用してください：

$('input:radio').click(function() {
  $('input:radio[name='+$(this).attr('name')+']').parent().removeClass('active');
        $(this).parent().addClass('active');
});​

$('input:radio[name='+$(this).attr('name')+']')クリックしたのと同じ名前のすべての無線要素を選択します。jqueryセレクターについて読んでください。

フィドル： http： //jsfiddle.net/NNkeQ/7/

あるいは単に：

$('input:radio').click(function() {
    $('label:has(input:radio:checked)').addClass('active');
    $('label:has(input:radio:not(:checked))').removeClass('active');
});​

http://jsfiddle.net/NNkeQ/18/

于 2012-07-20T21:58:23.690 に答える
0

ラジオボタンをクリックしても、チェックclickが外されたばかりのイベントにはイベントが送信されません。

active同じグループから他のラジオボタンを見つけて、それらからクラスを削除する必要があります。

これは、各グループのすべてのラジオボタンが単一の親（つまり、テーブル行）を共有している場合に最も簡単になります。例：

$(this).closest('td').siblings().find('.active').removeClass('active');
于 2012-07-20T21:58:52.177 に答える