Check a radio button with javascript


For some reason, I can't seem to figure this out.

I have some radio buttons in my html which toggles categories:

<input type="radio" name="main-categories" id="_1234" value="1234" /> // All
<input type="radio" name="main-categories" id="_2345" value="2345" /> // Certain category
<input type="radio" name="main-categories" id="_3456" value="3456" /> // Certain category
<input type="radio" name="main-categories" id="_4567" value="4567" /> // Certain category

The user can select whichever he/she wants, but when an certain event triggers, I want to set 1234 to be set checked radio button, because this is the default checked radio button.

I have tried versions of this (with and without jQuery):

document.getElementById('#_1234').checked = true;

But it doesn't seem to update. I need it to visibly update so the user can see it. Can anybody help?

EDIT: I'm just tired and overlooked the #, thanks for pointing it out, that and $.prop().

9/20/2018 5:13:00 PM

Accepted Answer

Do not mix CSS/JQuery syntax (# for identifier) with native JS.

Native JS solution:

document.getElementById("_1234").checked = true;

JQuery solution:

$("#_1234").prop("checked", true);

1/29/2019 11:24:16 PM

If you want to set the "1234" button, you need to use its "id":

document.getElementById("_1234").checked = true;

When you're using the browser API ("getElementById"), you don't use selector syntax; you just pass the actual "id" value you're looking for. You use selector syntax with jQuery or .querySelector() and .querySelectorAll().


Today, in the year 2016, it is save to use document.querySelector without knowing the ID (especially if you have more than 2 radio buttons):


Easiest way would probably be with jQuery, as follows:


This adds a new attribute "checked" (which in HTML does not need a value). Just remember to include the jQuery library:

<script src=""></script>

By using document.getElementById() function you don't have to pass # before element's id.


document.getElementById('_1234').checked = true;

Demo: JSFiddle


I was able to select (check) a radio input button by using this Javascript code in Firefox 72, within a Web Extension option page to LOAD the value:

var reloadItem ='reload_mode');
reloadItem.then((response) => {
    if (response["reload_mode"] == "Periodic") {
    } else if (response["reload_mode"] == "Page Bottom") {
        document.querySelector('input[name=reload_mode][value="Page Bottom"]').click();
    } else {

Where the associated code to SAVE the value was:

reload_mode: document.querySelector('input[name=reload_mode]:checked').value

Given HTML like the following:

    <input type="radio" id="periodic" name="reload_mode" value="Periodic">
    <label for="periodic">Periodic</label><br>
    <input type="radio" id="bottom" name="reload_mode" value="Page Bottom">
    <label for="bottom">Page Bottom</label><br>
    <input type="radio" id="both" name="reload_mode" value="Both">
    <label for="both">Both</label></br></br>