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:

 

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. 😀

25 thoughts on “Selecting radio button in JavaScript with jQuery”

  1. 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. 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…

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

  4. 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.

  5. 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’)

  6. Thanks for this! A Friend of mine was having trouble with this and I was able to use this post to teach myself something new, and pass it on to another programmer.

    Thanks again!

  7. I was having an issue selecting a specific radio button in a group via it’s set value. If you are attempting to do the same, be sure there is no space between the value clause and the name. Example:

    $(#input[value=myvalue]) and not $(#input [value=myvalue]), as the latter will not find the button specified.

  8. All,

    one question: I read in most of Your comments that You suggest to set the attribute “checked” of the radio button to the value “checked”. My question is: is this the recommended value? I instead tried to set it to “true” or “false”, which seems to make more sense semantically (and works). If the value is set to “checked”, the only way to remove the checkmark is to remove the attribute (i.e., use removeAttr(“checked”) ). I am a bit confused here… can somebody please comment on this? Thanks!

  9. Example

    All

    Select
    1111111
    222222

    Select
    1111111
    222222

    $(“#”).click(function () {

    if ($(“#lstFlateType”).attr(“disabled”) == false && $(“#lstFlateType”).val() == “0”) {
    alert(“Please select F”);
    }
    else if ($(“#lstMembers”).attr(“disabled”) == false && $(“#lstMembers”).val() == “0”) {
    alert(“Please select M”);
    }

    });

    $(“#rdoAll”).click(function () {
    $(“#lstFlateType”).attr(“disabled”, “disabled”);
    $(“#lstMembers”).attr(“disabled”, “disabled”);
    $(“#lstFlateType”).val(0);
    $(“#lstMembers”).val(0);
    });

    $(“#rdoFlateType”).click(function () {
    $(“#lstFlateType”).attr(“disabled”, “”);
    $(“#lstMembers”).attr(“disabled”, “disabled”);
    $(“#lstFlateType”).val(0);
    $(“#lstMembers”).val(0);
    });

    $(“#rdoMembers”).click(function () {
    $(“#lstFlateType”).attr(“disabled”, “disabled”);
    $(“#lstMembers”).attr(“disabled”, “”);
    $(“#lstFlateType”).val(0);
    $(“#lstMembers”).val(0);
    });

  10. @Björn.. (a late response, but anyway..) You are correct, ‘true’ or ‘false’ does make sense more semantically, and it is also the recommended value. I think my original example of checked=”checked” was a throw-back to the HTML days where you’d set a checkbox with a tag attribute ‘checked’ (see a w3schools page). However, that has never been a recommendation for JavaScript – even before the days of jQuery (even thought jQuery equates ‘checked’ with ‘true’) as can be seen on another w3schools page.

Leave a Reply to Arjan Cancel reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.