Controleer een keuzerondje met JavaScript

Om de een of andere reden kan ik dit niet vinden.

Ik heb een aantal radioknoppen in mijn HTML die categorieën schakelt:

<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

De gebruiker kan selecteren welke hij / zij wil, maar wanneer een bepaalde gebeurtenis triggert, wil ik 1234instellen om het keuzerondje van het selectievakje in te stellen, omdat dit het standaard gecontroleerde keuzerondje is.

Ik heb versies van dit geprobeerd (met en zonder jQuery):

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

Maar het lijkt niet bij te werken. Ik heb het nodig om zichtbaar bij te werken, zodat de gebruiker het kan zien.
Kan iemand helpen?

EDIT: Ik ben het gewoon moe en over het hoofd gezien de #, bedankt voor het verwijderen van het, dat en $.prop().

Antwoord 1, Autoriteit 100%

Meng geen CSS / jQuery-syntaxis (#voor identifier) ​​met native JS.

Native JS-oplossing:

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

jQuery-oplossing:

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

Antwoord 2, Autoriteit 10%

Als u de knop “1234” wilt instellen, moet u de “ID” gebruiken:

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

Als u de browser-API (“getElementById”) gebruikt, gebruikt u geen selectorsyntaxis; u geeft gewoon de werkelijke “id” -waarde door waarnaar u op zoek bent. Je gebruikt selector-syntaxis met jQuery of .querySelector()en .querySelectorAll().

Antwoord 3, autoriteit 6%

Tegenwoordig, anno 2016, is het veilig om document.querySelectorte gebruiken zonder de ID te kennen (vooral als je meer dan 2 keuzerondjes hebt):

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

Antwoord 4, autoriteit 3%

De gemakkelijkste manier is waarschijnlijk met jQuery, als volgt:

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

Dit voegt een nieuw attribuut “checked” toe (dat in HTML geen waarde nodig heeft).
Vergeet niet om de jQuery-bibliotheek op te nemen:

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

Antwoord 5, autoriteit 2%

Door de functie document.getElementById()te gebruiken, hoeft u #niet door te geven voor de id van het element.

Code:

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

Demo:
JSFiddle

Antwoord 6, autoriteit 2%

Ik was in staat om een radio-invoerknop te selecteren (aan te vinken) door deze Javascript-code in Firefox 72 te gebruiken, binnen een optiepagina voor webextensies om de waarde te LADEN:

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

waar de bijbehorende code de waarde opslaan was:

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

Gegeven HTML zoals het volgende:

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