Aktivieren Sie ein Optionsfeld mit Javascript

95

Aus irgendeinem Grund kann ich das nicht herausfinden.

Ich habe einige Optionsfelder in meinem HTML, die Kategorien umschalten:

<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

Der Benutzer kann auswählen, was er möchte, aber wenn ein bestimmtes Ereignis ausgelöst wird, möchte ich 1234das Kontrollkästchen aktiviert setzen, da dies das standardmäßig aktivierte Optionsfeld ist.

Ich habe Versionen davon ausprobiert (mit und ohne jQuery):

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

Aber es scheint nicht zu aktualisieren. Ich muss es sichtbar aktualisieren, damit der Benutzer es sehen kann. Kann jemand helfen?

EDIT: Ich bin nur müde und habe das übersehen #, danke für den Hinweis, dass und $.prop().

javascript html radio-button ptf
quelle
Überprüfen Sie diese StackOverflow-Frage: [So überprüfen Sie ein Optionsfeld
Mandy Schoep
8
Wechsel zudocument.getElementById('_1234').checked = true;
stackErr
1
@stackErr ohne die#
Tim Seguine
Sorry, nur ein falsches Copy-Paste. Jetzt aktualisiert. @FelipeKM Dann hilf mir bitte, ich habe keine gefunden, die hilft.
Ptf
@kjelelokk überprüfen Sie meinen Kommentar oder Pointys Antwort
stackErr

Antworten:

151

Mischen Sie die CSS / JQuery-Syntax ( #für Bezeichner) nicht mit nativem JS.

Native JS-Lösung:

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

JQuery-Lösung:

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

zavg
quelle
1
Technisch gesehen ist es die CSS-Auswahlsyntax. jQuery hat es gerade ausgeliehen und erweitert
Tim Seguine
jQuery hat es bekommen, wie querySelectorich mir vorstellen kann.
Andy
viel besser als.attr("checked", "checked")
ma77c
@Andy - Sizzle wurde ab Anfang 2006 in jQuery verwendet. ( en.wikipedia.org/wiki/JQuery#History ). querySelectorwurde erst 2009 in Browsern ausgeliefert und erst einige Zeit später von Entwicklern weit verbreitet. Ich habe jQuery noch nie so oft verwendet, aber es hat die Entwicklung von JS erheblich beeinflusst.
Rounin
Dies aktiviert das Kontrollkästchen, löst jedoch nicht unbedingt das zugehörige Ereignis aus. Welches Ereignis wird ausgelöst, wenn der Benutzer auf ein Optionsfeld klickt?
Robisrob
16

Wenn Sie die Schaltfläche "1234" einstellen möchten, müssen Sie die "ID" verwenden:

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

Wenn Sie die Browser-API ("getElementById") verwenden, verwenden Sie keine Selektorsyntax. Sie übergeben nur den tatsächlichen "ID" -Wert, den Sie suchen. Sie verwenden die Selektorsyntax mit jQuery oder .querySelector()und .querySelectorAll().

Spitze
quelle
Jeder erhält das Element per ID. Ich habe mehr als ein Optionsfeld mit demselben Namen. und ich denke, das ist es, was die meisten Leute brauchen, um eine Gruppe von Radios nach Namen auszuwählen und dann basierend auf dem Wert eines von ihnen zu überprüfen.
Ndm Gjr
@NadeemGorsi Das Attribut "id" kann nicht von mehr als einem Element gemeinsam genutzt werden. Alle "id" -Werte müssen auf einer bestimmten Seite eindeutig sein.
Pointy
9

Heute, im Jahr 2016, ist die Verwendung document.querySelectorohne Kenntnis der ID sicher (insbesondere wenn Sie mehr als 2 Optionsfelder haben):

document.querySelector("input[name=main-categories]:checked").value
StanE
quelle
3
OK, aber wie kann ich den umgekehrten Effekt erzielen oder ein Radio anhand des Werts überprüfen? Und genau darum ging es bei dieser Frage.
Ndm Gjr
1
@NadeemGorsi Ich habe eine Antwort gegeben, um ein Optionsfeld mit QuerySelector auszuwählen oder zu "überprüfen"
kevinf
6

Der einfachste Weg wäre wahrscheinlich mit jQuery wie folgt:

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

Dies fügt ein neues Attribut "geprüft" hinzu (das in HTML keinen Wert benötigt). Denken Sie daran, die jQuery-Bibliothek einzuschließen:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
Esser
quelle
Oder einfach$("#_1234").prop("checked", true)
undefiniert
3

Wenn Sie die document.getElementById()Funktion verwenden, müssen Sie nicht #vor der ID des Elements übergeben.

Code:

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

Demo: JSFiddle

Daniel Kmak
quelle
3

Ich konnte ein Optionsfeld auswählen (aktivieren), indem ich diesen Javascript-Code in Firefox 72 auf einer Web-Erweiterungsoptionsseite verwendete, um den Wert zu 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();
    }
});

Wo der zugehörige Code zum Speichern war der Wert:

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

Gegebenes HTML wie folgt:

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