Check a radio button with javascript

Question

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().

Check this StackOverflow question: [How to check a radio button with jQuery][1] [1]: http://stackoverflow.com/questions/5665915/how-to-check-a-radio-button-with-jquery — Mandy Schoep, Jan 16 '14 at 16:07
change to `document.getElementById('_1234').checked = true;` — stackErr, Jan 16 '14 at 16:07
Sorry, just a wrong copy-paste. Updated now. @FelipeKM Then please help me, I've not found one that helps. — ptf, Jan 16 '14 at 16:10
how do you wanna select a element by ID passing the wrong id? Remove this '#' before '_1234', this is for query selectors such jQuery $('#_1234') — felipekm, Jan 16 '14 at 16:11

zavg · Accepted Answer · 2019-01-29T23:24:16.720

227

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);

edited Jan 29 '19 at 23:24

answered Jan 16 '14 at 16:09

zavg

10,351
4
44
67

2

Technically it's CSS selector syntax. jQuery just borrowed and extended it – Tim Seguine Jan 16 '14 at 16:10
jQuery got it from `querySelector` I would imagine. – Andy Jan 16 '14 at 16:12
much better than `.attr("checked", "checked")` – ma77c Oct 04 '17 at 19:37
2

@Andy - Sizzle was used in jQuery from early 2006 onwards. (https://en.wikipedia.org/wiki/JQuery#History). `querySelector` wasn't shipped in browsers until 2009 and wasn't being used widely by developers until some time after that. I've never used jQuery all that much, but it significantly impacted on the evolution of JS. – Rounin Aug 22 '18 at 10:29
this sets the check box but doesn't necessarily trigger the associated event. what event is triggered when the user clicks a radio button? – robisrob Jun 19 '19 at 20:12
@robisrob Yes, as this only changes the `checked` property of the radio button and does not perform a `click`, `change` or any other event. If you were to use `checkboxSelector.click()`, that would be where you would trigger a click event. – undefined Oct 29 '19 at 16:05

score 26 · Answer 2 · answered Jan 16 '14 at 16:07

26

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().

answered Jan 16 '14 at 16:07

Pointy

405,095
59
585
614

everyone is getting the element by ID I have more than one radio buttons with the same name. and I think that's what most people need to select a group of radios by name and then based on value check one of them. – TechNerdXp Apr 11 '19 at 23:57
@NadeemGorsi the "id" attribute cannot be shared by more than one element. All "id" values must be unique on a given page. – Pointy Apr 12 '19 at 04:01

score 20 · Answer 3 · edited Jul 18 '22 at 10:32

20

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

document.querySelector("input[name=main-categories]:checked").value

edited Jul 18 '22 at 10:32

nelsonic

31,111
21
89
120

answered Sep 25 '16 at 14:10

StanE

2,704
29
38

4

OK, but how can I get the reverse effect or check a radio based on value.. and that's what question was about in fact. – TechNerdXp Apr 11 '19 at 23:54
1

@NadeemGorsi I provided an answer to select or "check" a radio button using QuerySelector – Kevin Feb 25 '20 at 19:43

score 6 · Answer 4 · edited Feb 19 '18 at 09:16

6

Easiest way would probably be with jQuery, as follows:

$(document).ready(function(){
  $("#_1234").attr("checked","checked");
})

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

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

edited Feb 19 '18 at 09:16

Rubyist

6,486
10
51
86

answered Jan 16 '14 at 17:06

Esser

540
1
4
16

1

Or just `$("#_1234").prop("checked", true)` – undefined Oct 29 '19 at 16:07

score 4 · Answer 5 · answered Jan 16 '14 at 16:10

4

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

Code:

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

Demo: JSFiddle

answered Jan 16 '14 at 16:10

Daniel Kmak

18,164
7
66
89

score 3 · Answer 6 · answered Feb 25 '20 at 19:41

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 = browser.storage.sync.get('reload_mode');
reloadItem.then((response) => {
    if (response["reload_mode"] == "Periodic") {
        document.querySelector('input[name=reload_mode][value="Periodic"]').click();
    } else if (response["reload_mode"] == "Page Bottom") {
        document.querySelector('input[name=reload_mode][value="Page Bottom"]').click();
    } else {
        document.querySelector('input[name=reload_mode][value="Both"]').click();
    }
});

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>

score 2 · Answer 7 · edited Sep 16 '22 at 13:23

2

It seems the item.checked property of a HTML radio button cannot be changed with JavaScript in Internet Explorer, or in some older browsers.

I also tried setting the "checked" attribute, using: item.setAttribute("checked", ""); I know the property can be set by default, but I need just to change the checked attribute at runtime.

As a workarround, I found another method, which could be working. I had called the item.click(); method of a radio button. And the control has been selected. But the control must be already added to the HTML document, in order to receive the click event.

edited Sep 16 '22 at 13:23

Friedrich -- Слава Україні

2,901
1
21
40

answered Jan 20 '22 at 17:37

Adrian Brinas

21
2

Nice detail Adrian, but I think the original poster had a much simpler question with a "#" in the wrong place :) – Dave Potts Jan 20 '22 at 21:48
Thanks for the tip with `item.click()` – bgrand-ch Jun 03 '22 at 12:09

Check a radio button with javascript

7 Answers7

Linked

Related