Selecting radio button in JavaScript with jQuery


I’m learning jQuery, and really like all the endless additional features (not to mention the ease of writing code!) it brings to JavaScript. But for a newbie some things take time to sink in, especially since the concept of jQuery is a bit different from vanilla JavaScript.

It took me couple of hours to figure out the following two lines to control default selection of radio buttons in a form (I knew how it’s done in plain JavaScript, of course, but it was the jQuery format that was something new to figure out). Setting the radio button attribute isn’t enough; the value needs to be set separately. I might write a simple helper plugin for jQuery later once I become more familiar with it so that setting the attribute automatically sets the corresponding value to the radio group.

$("input[@name='us_edition']").val("both");

$("#us_edition_both").attr("checked", "checked"); 

That piece of code selects the "us_edition_both" (with value "both") radio button in my form:

<input name="us_edition" type="radio" id="us_edition_both" value="both" \ 

onClick="show_us_mailing();" checked="checked"> 

<input name="us_edition" type="radio" id="us_edition_digi" value="digi" \ 

onClick="hide_us_mailing();">

Of course it shouldn’t have been this difficult to figure out and, of course, it isn’t.  A month from now I’ll snicker at myself having spent more than two hours figuring out how to do this. :D

  1. #1 by Arjan on 18 July 2008 - 04:40

    And to get the selected value:

    var selected = $(“input[@name='us_edition']:checked”).val();

    By the way: I doubt one needs to set the value; I think

    $(“#us_edition_both”).attr(“checked”, “checked”);

    is sufficient to make the browser do the rest.

  2. #2 by gorenje on 13 August 2008 - 03:07

    I tried this out but couldn’t get it working. I ended up using the form plugin from jquery –> http://malsup.com/jquery/form/#download

    The plugin works a treat :-)

  3. #3 by Etienne Posthumus on 27 August 2008 - 17:06

    And I was looking and looking and looking, and finally found how to set a radiobutton to checked with jQuery on your blog. Thanks for sharing, cheers

  4. #4 by jain on 30 December 2008 - 06:09

    That was what i was looking for !!

  5. #5 by Nancy on 16 January 2009 - 11:15

    This is exactly what I’m looking for! Thanks for sharing.

  6. #6 by Jan on 23 February 2009 - 08:50

    Thanks. That very helpfull.
    As for Arjan tip – not work at FireFox. Not sure about other web browsers :) .

  7. #7 by Marcello on 06 April 2009 - 02:55

    Arjan is using a deprecated way to point at an object via its name. I did the same mistake, the correct code is:

    var selected = $(”input[name='us_edition']:checked”).val();

    without the @

    wasted like three hours figuring that out…

  8. #8 by Ville Walveranta on 06 April 2009 - 02:57

    Marcello, thanks for pointing that out!

  9. #9 by Marc on 06 April 2009 - 17:43

    The @ is removed for the latest version of jQuery. Listed in the release notes, Marcello.

  10. #10 by DZ on 15 July 2009 - 09:13

    Nice, was looking for “jquery setting radio button checked” in google, yours was one of the first that came up. Thanks!

  11. #11 by Martyn on 06 October 2009 - 16:58

    To set a button, you may use the following method:

    $(‘input[name="us_edition"]‘).each(function() {
    if($(this).val() == “digi”) {
    $(this).attr(“checked”,”checked”);
    }
    });

    This will set the radio button to be checked for the “digi” value.

  12. #12 by Kev on 23 January 2010 - 05:10

    Hi,

    Thanks for this, I always forget how to do it and you got me out of a really tight squeeze!

  13. #13 by JoaoLuiz on 10 March 2010 - 12:21

    Reply to Martyn. To use on a button and a group of radios, use: $(‘input[name=X_Y_Z][value=A_B_C]‘).attr(‘checked’,'checked’)

(will not be published)