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" value="1234" /> // All <input type="radio" name="main-categories" value="2345" /> // Certain category <input type="radio" name="main-categories" value="3456" /> // Certain category <input type="radio" name="main-categories" 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().
7 Answers
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);
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):
document.querySelector("input[name=main-categories]:checked").value 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=""></script> By using document.getElementById() function you don't have to pass # before element's id.
Code:
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 = 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" name="reload_mode" value="Periodic"> <label for="periodic">Periodic</label><br> <input type="radio" name="reload_mode" value="Page Bottom"> <label for="bottom">Page Bottom</label><br> <input type="radio" name="reload_mode" value="Both"> <label for="both">Both</label></br></br> 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.
2
