Question

UPDATE:
The problem is more complex. Looks like it involves accordion header not passing .click events correctly, and has nothing to do with :checked selector. All of this example work fine in a test file.

Please see Radio input in header of accordion problem ?BUG

I have a form with several radio elements, each names “rx” (where x is 1..3), .buttonset() applied.
with

e.g id=3

alert ($('input:radio[name=r'+id+']').val());
//returns value of the first radio in the set

alert ($('input:radio[name=r'+id+']:checked').val());
//returns 'undefined', even one of the radios is checked.

and I’ve tried both :checked')[0], :checked').get(0), :checked').attr('id')

I wonder why the first method returns a value… Does it have anything to do with .buttonset adding classes/element??

Any advice is appreciated!

PS. $(‘input:radio[name=r’+id+’]’).get(0)
returns [object HTMLInputElement], I guess the way its supposed to. But this object has no .html() or .val() methods. $(‘input:radio[name=r’+id+’]:checked’).get(0) is still ‘undefined’.

PPS. forcing visibility for ui-helper-hidden-accessible
buttonset does not change “checked” for the original radio elements.
I guess I can use .ui-state-active to check active radio instead… Any better way?

Answer 1

The reason it doesn’t return a value is because when you use the :checked selector if the radio is not selected it won’t be part of the resultset. Example:

<input type="radio" name="r1" value="1" checked="checked" />
<input type="radio" name="r2" value="2" />

Now:

alert($('input:radio[name=r1]').val()); // alerts 1
alert($('input:radio[name=r1]:checked').val()); // alerts 1
alert($('input:radio[name=r2]').val()); // alerts 2
alert($('input:radio[name=r2]:checked').val()); // alerts undefined as the button is not selected