web-dev-qa-db-de.com

Aktivieren Sie ein Optionsfeld mit Javascript

Aus irgendeinem Grund kann ich das nicht herausfinden.

Ich habe einige Optionsfelder in meinem HTML-Code, mit denen die Kategorien umgeschaltet werden:

<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 das Optionsfeld 1234 Aktivieren, 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 den # Übersehen, danke für den Hinweis, dass und $.prop().

javascripthtmlradio-button
74
ptf

Mischen Sie keine CSS/JQuery-Syntax (# Für Bezeichner) mit nativem JS.

native JS-Lösung:

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

JQuery-Lösung:

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

123
zavg

Wenn Sie den "1234" -Button setzen möchten, müssen Sie dessen "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().

13
Pointy

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

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

Dies fügt ein neues Attribut "checked" 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>
6
Esser

Heute, im Jahr 2016, ist es sicher, document.querySelector ohne die ID zu kennen (besonders wenn Sie mehr als 2 Optionsfelder haben):

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

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

Code:

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

Demo: JSFiddle

1
Daniel Kmak