Using Prototype Javascript to set the value of a radio group

Not that long ago I wrote Using Prototype Javascript to get the value of a radio group, but I keep getting asked how to set the value of a radio group using prototype JS. Here are a couple ways to do just that.

$$("input[type=radio][name='radioGroupName'][value='yourDefaultValue']")[0].writeAttribute("checked", "checked");
$("someRadioGroupMember").writeAttribute("checked", "checked");

About Aaron D. Campbell

Owner and lead developer at BlueDog, Aaron has 10+ years of web development experience, it a regular core contributor to the WordPress project, and has released many WordPress plugins.
This entry was posted in JavaScript, PrototypeJS and tagged , , . Bookmark the permalink.

11 thoughts on “Using Prototype Javascript to set the value of a radio group

  1. Hmm… The latter was the one I wanted to use, but it didn’t work for me… I used this instead, which worked a-ok.

    $(“someRadioGroupMember”).checked = true;

  2. What version of Prototype were you using?

  3. Rob says:

    It didn’t work for me either

    $$(“input[type=radio][name=’groupname’][value=’myvalue’]”).writeAttribute is not a function

    Prototype 1.6.0

  4. Rob: Sorry, there was a mistake in that. there should have been a “[0]” following the $$(). Try it with the updated code.

  5. Ben Greiner says:

    Gosh guess I actually have to do the heavy lifting myself here. This is with Prototype 1.8.3.. Though I see no reason why this wouldn’t work with older prototype versions. Enjoy ;o)~

    function $RFS(radioGroup, value) {
    	if( curRadio = $$('input[type=radio]').detect( function isRadioGroup(group){
    		if(group == $(radioGroup) && group.value == value){return true;}
    	})){ curRadio.checked = true; }

    * comment edited by admin to use the `code` shortcode around the source code snippet

    • Thanks for the input. Do you think that’s going to be as efficient as:

      $$("input[type=radio][name='radioGroupName'][value='yourDefaultValue']")[0].writeAttribute("checked", "checked");
      • Ben Greiner says:

        I was unable to get the multiple selects input[type=radio][name=varName] to return valid values.. Always came back empty. I am using a Prototype class in an external js file that has all the field names passed in as constructor options. When I passed name=this.options.fieldName it seemed to take it as a literal instead of a var. So that would be why I had to do a little work around here..

      • Ben Greiner says:

        But you make an interesting point.. I hadn’t thought about delimiting the double quotes and just plug in my vars.. The obvious often eludes me..

        $$(“‘input[type=radio][name=’ ” + radioGroup + ” ‘][value=’ ” + value + ” ‘]”)[0].writeAttribute(‘checked’, ‘checked’);

        This also works.. But to answer your initial question.. I don’t know which version would be faster, though yours is certainly more compact. That would be something interesting to find out certainly.. but alas.. I must be moving on. Think I will use your modified solution for now ;-)

      • Ben Greiner says:

        Oh well now you made me curious.. I did some basic benchmarking.

        Now on my main Ubuntu machine, it was dead even. 1 millisecond execution time. Not a surprise the thing is a quad core screamer. I ran it with my Dual Core Mac Book Pro and got the follow results..

        I had three sets of Option Boxes Each with two Options..

        This was with my solution.

        With the modified version of your solution..

        So the results are in and your solution has it by 1 millisecond!

        If anyone else would like to try it out..

        function $RFS(radioGroup, value) {
        var date1 = new Date();
        var milliseconds1 = date1.getTime();

        //$$(“‘input[type=radio][name='” + radioGroup + “‘][value='” + value + “‘]”)[0].writeAttribute(‘checked’, ‘checked’);

        if(curRadio = $$(‘input[type=radio]’).detect( function isRadioGroup(group){
        if(group.getAttribute(‘id’) == $(radioGroup).getAttribute(‘id’) && group.value == value){ return true;}
        })){ curRadio.checked = true; }

        var date2 = new Date();
        var milliseconds2 = date2.getTime();

        var difference = milliseconds2 – milliseconds1;


      • Ben Greiner says:

        Something else to note.. After doing more testing. I discovered that if the value is already set, it appears that the Aaron’s solution does not change the values. In this scenario the radio buttons load run the js script and set their values, GREAT! Now the user comes along and changes the values.. but users being indecisive, decides he doesn’t want to change them after all and instead clicks cancel. This will then reset those radio buttons by running the same bit of code, and restoring cached values of the original state. I have discovered that my solution will actually reset those values.

  6. Ben Greiner says:

    Ooops Small gaff.. This is the correct function.. My Bad..

    function $RFS(radioGroup, value) {
    if(curRadio = $$(‘input[type=radio]’).detect( function isRadioGroup(group){
    if(group.getAttribute(‘id’) == $(radioGroup).getAttribute(‘id’) && group.value == value){ return true;}
    })){ curRadio.checked = true; }

Leave a Reply

Your email address will not be published. Required fields are marked *

Note: If you are replying to another commenter, click the "Reply to {NAME} ↵" button under their comment!