Überprüfen Sie ein Optionsfeld mit Javascript

Question

Aus irgendeinem Grund kann ich nicht scheinen, dies herauszufinden.

Ich habe einige Radio-Buttons in meinem html die Kategorien schaltet:

<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, je nachdem, was er/sie will, aber wenn ein bestimmtes Ereignis auslöst, möchte ich 1234 einstellen geprüft Radio eingestellt werden Knopf, weil dies der voreingestellte Radioknopf ist.

Ich habe versucht, Versionen dieses (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 die # übersehen, danke für den Hinweis darauf, dass und $.prop().

Answer 1

Mischen Sie CSS-Syntax (# für Identifier) ​​nicht mit nativer JS

Einheimische JS Lösung:

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

JQuery Lösung:

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

Answer 2

Wenn Sie die „1234“ Taste einstellen möchten, müssen Sie die „id“ verwenden:

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

Wenn Sie die Browser-API verwenden („getElementById“), können Sie nicht verwenden Wählersyntax; Sie übergeben nur den tatsächlichen "ID" -Wert, nach dem Sie suchen. Sie verwenden die Selektorsyntax mit jQuery oder .querySelector() und .querySelectorAll().

Answer 3

Mit document.getElementById() Funktion müssen Sie nicht # vor Element-ID übergeben.

Code:

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

Demo: JSFiddle

Answer 4

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

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

Dies fügt ein neues Attribut "checked" (die in HTML benötigt keinen Wert). Denken Sie daran, die jQuery-Bibliothek enthalten:

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

Answer 5

Heute, im Jahr 2016, ist es sparen document.querySelector zu verwenden, ohne die ID zu wissen (vor allem, wenn Sie mehr als 2 Radiobuttons haben):

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