jQuery does not return checked radio value

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 http://stackoverflow.com/questions/3278756/radio-input-in-header-of-accordion-problem

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

Try this one-

$("input[name='radio_name']:checked").val();

Answer 2

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

Answer 3

Read the page about selectors, especially this one http://api.jquery.com/attribute-starts-with-selector/

alert ($(':radio[name^=r]:checked').val());

should return the checked button's value, or undefined if none is selected.