If you want to get the value of the selected element of a radio group, prototype makes this easy. There is more than one way to do it. I’ll update this post as better methods surface. Check out code after the jump.
$$('input:checked[type="radio"][name="my_radio_group"]').pluck('value');
What this does is use css selectors to pull out an input element with the attribute “checked” of type “radio” and with the name”my_radio_group”. The $$ function returns an array, although in this case it is only one element long. “pluck” returns the given attribute (in our case we want the value attribute) for the elements in the array.
It works great. Thanks a lot for sharing
By Hieu Le on Jul 3, 2008
Works like a charm! Thanks!
By Leon on Jul 31, 2008
Works a treat, thanks heaps!
By Nik Wakelin on Sep 30, 2008
Very elegant! I laughed out loud when I read it. I love how you can do this kind of stuff with Prototype.
By Grant on Oct 18, 2008
Very elegant, thank you! As a Prototype rookie, though, I’m wondering… don’t you need to have [0] at the end of that line? pluck() seems to return an array, and you want the scalar value for the chosen value. It seems to work just fine as-is, so maybe I don’t have a thorough understanding of how JS arrays work…
By Jeff Garbers on Nov 18, 2008
nice post, thanks…
By Jonathan Manaois on Jul 7, 2009
very cool!
thanks.
By shuji on Mar 20, 2010
Your post seems to say that you can use this method to obtain a single value, but doesnt pluck return all the values from all the checked elements? which means it’ll return an array of 1 element which contains the value?
a better way perhaps is like this:
var value = form.down(“input:checked[type='radio'][name='radio_group_name']“).value;
It seems this is slightly simpler, I suppose not a great improvement. But it will return the value itself, not an array containing the value.
Thanks for your solution.
By Christopher Thomas on Aug 1, 2010
Excellent, thanks!
It’s workin’ so fine!
By jaaristizabal on Feb 21, 2011