web-dev-qa-db-ja.com

親要素のjQueryラジオonchangeトグルクラス？

以下をご覧ください。

$('#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）のクラスを変更することもできますか？

ありがとう。

jqueryradio-buttononchange
10
TigerTiger

次のようなものを試してください。

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

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

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

$('.green').removeClass('green');
13
Chris Van Opstal

ラジオボタンとチェックボックスで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');
    }
});
13
Philippe Leybaert

これを試して：

if($(this).is(':checked')) {
    $(this).parent().siblings('td.green').removeClass('green');
    $(this).parent().addClass('green');
}
4
eu-ge-ne

ラジオボタンがどれだけ深くネストされているかを気にせず、ラジオボタンの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');
    }
});
4
mungojerie

私の提案は：

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

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

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

<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（）は使用しません。

0
eapo

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

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

特徴：

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

お役に立てれば！

0
romaninsh