Experiences on the Front Lines of User Interfaces and Web Development

Get selected value from radio button group using jQuery

I always forget the correct way to get the currently selected value of a radio button group. I'm documenting it here so I can hopefully finally remember it!

Suppose the following markup:
<input name="date" type="radio" value="today" checked="checked" /> Today <br />
<input name="date" type="radio" value="yesterday" /> Yesterday

"Today" will be selected by default when the page loads. If you use the following jQuery, you will get "today".
// DON'T USE THIS ONE!!
alert( jQuery( 'input[name=date][checked=checked]' ).val() );

But, you will still get "today" even if the user clicks on the yesterday radio box. That's because the "checked=checked" will not change, only the internal DOM property will be updated. So, this is the correct way to get the radio button value, which will handle default cases and after a user selects a different value:
alert( jQuery( 'input[name=date]:checked' ).val() );
comments powered by Disqus