jquery - 親要素のjQueryラジオonchangeトグルクラス?

Question

以下をご覧ください。

$('#myRadio').change(function() {           

    if($(this).is(':checked'))  {
        $(this).parent().addClass('green');
    } else {                              
        $(this).parent().removeClass('green');
    }
});

マークアップは次のようになります

<table>
  <tr>
    <td>Some text 1 </td>
    <td><input type="radio" value="txt1" name="myRadio" id="text1" /></td>
    <td>Some text 2 </td>
    <td><input type="radio" value="txt2" name="myRadio" id="text2" /></td>
    <td>Some text 3 </td>
    <td><input type="radio" value="txt3" name="myRadio" id="text2" /></td>
  </tr>
</table>

ラジオを切り替えると、上記の JavaScript コードは TD タグに「緑」を適用しますが、これは問題ありません。しかし、選択を別のラジオに変更すると、緑が別のラジオに追加されますが、以前に選択したラジオから緑が削除されません。

ラジオオプションを選択すると親 TD のクラスが緑に変更され、別のオプションを選択するとすべてがリセットされ、新しく選択されたものだけに緑が追加されるようにするにはどうすればよいですか?

「何らかのテキスト3」などを含む最初の以前のTDのクラスを変更することもできますか??

ありがとう。

score 13 · Accepted Answer

次のようなことを試してください：

if($(this).is(':checked'))  {
    $(this).parent().parent().parent().find('.green').removeClass('green');
    $(this).parent().addClass('green');
}

これにより、現在のラジオボタングループのテーブル要素が検索され、緑色のクラスを持つ要素が検索され、クラスが削除されます。

または、ページにラジオボタングループが 1 つしかない場合は、次のようにする方が簡単です。

$('.green').removeClass('green');

score 13 · Accepted Answer

ラジオボタンとチェックボックスで change() イベントを使用しないでください。少し危険で、ブラウザー間で一貫性のない動作をします (IE のすべてのバージョンで問題が発生します)。

代わりに click() イベントを使用します (アクセシビリティについて心配する必要はありません。キーボードでラジオボタンをアクティブ化/選択した場合にもクリックイベントが発生するためです)。

ここで他の人が指摘したように、グリーンをリセットするのも簡単です。

したがって、コードを次のように変更するだけです

$('#myRadio').click(function() {           
    $(this).parents("tr").find(".green").removeClass("green");

    if($(this).is(':checked'))  {
        $(this).parent().addClass('green');
    }
});

編集: コメントで要求されているように、前の td も変更します:

$('#myRadio').click(function() {           
    $(this).parents("tr").find(".green").removeClass("green");

    if($(this).is(':checked'))  {
        $(this).parent().prev().andSelf().addClass('green');
    }
});

さらに良いことに、親行のすべての td 要素を緑色にします。

$('#myRadio').click(function() {           
    $(this).parents("tr").find(".green").removeClass("green");

    if($(this).is(':checked'))  {
        $(this).parents("tr").find("td").addClass('green');
    }
});

score 4 · Accepted Answer

ラジオボタンのネストの深さを気にしないソリューションを作成しました。ラジオボタンの name 属性を使用するだけです。これは、このコードがどこでも変更なしで機能することを意味すると思います-1つのラジオボタンが同じ名前のコホートとは異なる方法でネストされているという奇妙な状況があるため、それを書く必要がありました。

$('input[type="radio"]').change( function() {
    // grab all the radio buttons with the same name as the one just changed
    var this_radio_set = $('input[name="'+$(this).attr("name")+'"]');

    // iterate through each  
    // if checked, set its parent label's class to "selected"
    // if not checked, remove the "selected" class from the parent label
    // my HTML markup for each button is  <label><input type="radio" /> Label Text</label>
    // so that this works anywhere even without a unique ID applied to the button and label
    for (var i=0; i < this_radio_set.length;i++) {
        if ( $(this_radio_set[i]).is(':checked') ) $(this_radio_set[i]).parents('label').addClass('selected');
        else $(this_radio_set[i]).parents('label').removeClass('selected');
    }
});

score 4 · Accepted Answer

これを試して：

if($(this).is(':checked')) {
    $(this).parent().siblings('td.green').removeClass('green');
    $(this).parent().addClass('green');
}

score 1 · Accepted Answer

私の提案は：

$('#myRadio').change(function() {           
    _parent = $(this).parent();
    if($(this).is(':checked'))  {
       _parent.addClass('green');
    } else {                              
       _parent.removeClass('green');
    }
});

score 0 · Accepted Answer

これが私にとってうまくいった解決策です：

var $boxes=$('input:radio');
var $parents = $boxes.parent();
$boxes.click(function(){
    $parents.filter('.selected').removeClass('selected');
    $(this).parent().addClass('selected');
});
$boxes.filter(':checked').parent().addClass('selected');

特徴：

もっと早く。チェックボックスのリストを一度だけ選択します。
:checked に依存しません。「クリック」と「変更」がブラウザ間で実行される特定の順序があるかどうかはわかりません。
jQuery 推奨の [type="radio"] の代わりに :radio を使用
ラジオボタンのデフォルト値の親にクラスを設定します。

お役に立てれば！

score 0 · Accepted Answer

私はこれがこれを行うための最良かつより柔軟な方法だと思います:

テーブルを忘れて（Googleはその理由をたくさん知っています）、以下のようなラッパーを使用します

<div id="radio_wrapper">
    <span class="radio">
        <label for="myRadio1" class="myRadio">Some text 1 </label>
        <input type="radio" value="txt1" name="myRadio" id="myRadio1" class="myRadio" />
    </span>
    <span class="radio">
        <label for="myRadio2" class="myRadio">Some text 2 </label>
        <input type="radio" value="txt2" name="myRadio" id="myRadio2" class="myRadio" />
    </span>
    <span class="radio">
        <label for="myRadio3" class="myRadio">Some text 3 </label>
        <input type="radio" value="txt3" name="myRadio" id="myRadio3" class="myRadio" />
    </span>
</div

このようなCSSでフォーマットする

span.radio {
    background-color: #cccccc;
}
span.currentGreen {
    background-color: #ccffcc;
}

このスクリプトを使用すると、必要に応じてまったく同じことができます

$('.myRadio').change(function() {           
    $('.currentGreen').removeClass('currentGreen'); // remove from all
    if ($(this).is(':checked')) {
        $(this).parent().addClass('currentGreen'); // add to current
    }
});

この場合、不必要なリソースを使用するため、filter() と find() を使用するのは好きではありません。

jquery - 親要素のjQueryラジオonchangeトグルクラス?

7 に答える 7

Related

Reference