jquery - 複数のセレクターの一貫性のない奇妙な動作を見つける

Question

radio各行に があるテーブルがあります。を持つのクラスが必要selectedです。trselected radio

だから私はこれをしました：

$(":radio[name='grp']").on("change", function() {
    $("#tbl1").find("tr.selected, tr:has(:radio:checked)").toggleClass("selected");
});

radios下から上にチェックを開始すると、うまく機能します。ただし、上から下に開始すると、一度は機能し、その後は一度も機能しません。

関数がなくてもfind、コードがうまく機能することを特定できました。

$(":radio[name='grp2']").on("change", function() {
    $("#tbl2 tr.selected, #tbl2 tr:has(:radio:checked)").toggleClass("selected");
});

ここには、テストするためのフィドルがあります。

ここで何が起こっているのですか？

更新:問題はメソッドにあることにも注意しました。これは、find機能すると常に長さ 2 の jQuery オブジェクトが返されるためです。機能しない場合、長さ 1 が返されます。ただし、分離された文の2 つfindの場合、どちらも長さ 1 を返し、異なる要素から取得されます。

Answer 1

:radioここでわかるように、廃止されましたhttp://api.jquery.com/category/deprecated/

input[type=radio]ラジオボタンを取得するために使用する必要があります

使用input[type=radio]すると完全に機能します

http://jsfiddle.net/kLk6J/

Answer 2

これがあなたがする必要があることです -

$(":radio[name='grp']").on("change", function() {
    $("#tbl1").find("tr").removeClass("selected");
    $(this).parents("tr").addClass("selected");
});

変更ごとに、選択したクラスをすべての行から削除し、そのクラスを問題のラジオ ボタンの親 tr に適用します。トグルすると、実行するたびにクラスのオンとオフを切り替えることになりますが、それはあなたが望んでいることではありません。

Answer 3

 $("input[name='grp']")

 $("input[name='grp2']")