Find multiple selector inconsistent odd behavior

Question

I have a table that has a radio in each row. I want to have a class selected for the tr which has the selected radio.

So I did this:

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

When you start checking the radios from the bottom to the top it works great. However if you start from the top to the bottom, it works once, then it doesn't work once and so on.

I could isolate that without the find function the code works great:

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

Here there is a fiddle for you to test it.

What's happening here?

Update: I've also noted that the problem is with the find method because when it works it always returns a jQuery object with a length of 2. When it doesn't work, it returns a length of 1. However, if I make the two find in separated sentences, they both return a length of 1 and from different elements.

Answer 1

:radio has been deprecated as you can see here http://api.jquery.com/category/deprecated/

You should be using input[type=radio] to get radio buttons

using input[type=radio] works perfectly

http://jsfiddle.net/kLk6J/