So erhalten Sie den Wert eines ausgewählten Optionsfelds

Lesezeit: 8 Minuten

Benutzeravatar von ZombieBatman
ZombieBatman

Ich möchte den ausgewählten Wert aus einer Gruppe von Optionsfeldern erhalten.

Hier ist mein HTML:

<div id="rates">
  <input type="radio" id="r1" name="rate" value="Fixed Rate"> Fixed Rate
  <input type="radio" id="r2" name="rate" value="Variable Rate"> Variable Rate
  <input type="radio" id="r3" name="rate" value="Multi Rate" checked="checked"> Multi Rate
</div>

Hier ist mein JavaScript-Code:

var rates = document.getElementById('rates').value;
var rate_value;
if(rates == 'Fixed Rate'){
    rate_value = document.getElementById('r1').value;

}else if(rates == 'Variable Rate'){
    rate_value = document.getElementById('r2').value;

}else if(rates == 'Multi Rate'){
    rate_value = document.getElementById('r3').value;
}

document.getElementById('results').innerHTML = rate_value;

Ich bekomme immer nicht definiert.

  • Sie verwenden hier kein jQuery, aber wenn Sie jemals wollten, könnten Sie dies verwenden: $("input[type='radio'][name='rate']:checked").val();

    – GJK

    5. April 2013 um 16:48 Uhr

  • Warum können Sie dieses Objekt nicht inspizieren? Jedenfalls müssen Sie verwenden .checked

    – Amol M. Kulkarni

    5. April 2013 um 16:52 Uhr

  • mögliches Duplikat des Abrufens des ausgewählten Werts des Optionsfelds im Falle einer Aktion

    – GOTO 0

    23. Juli 2013 um 10:52 Uhr

  • Ich bin mir nicht sicher, ob das erforderlich ist oder nicht, aber es ist eine gute Angewohnheit, Optionsfelder einzubauen <form></form> Container.

    – Kamil

    17. Januar 2016 um 12:27 Uhr

  • Mögliches Duplikat von How to get the selected radio button value using js

    – Damjan Pavlica

    26. September 2016 um 14:40 Uhr

Benutzeravatar von Parthik Gosar
Parthik Gosar

Dies funktioniert in IE9 und höher und allen anderen Browsern.

document.querySelector('input[name="rate"]:checked').value;

  • Natürlich müssten Sie prüfen, ob querySelector null zurückgibt. Dies ist der Fall, wenn kein Optionsfeld aktiviert ist.

    – Robert

    3. Februar 2014 um 8:20 Uhr


  • @KamranAhmed: Ihre jQuery-Lösung ist mit viel höheren Kosten verbunden.

    Benutzer1106925

    31. Dezember 2014 um 20:21 Uhr

  • ParthikGosar: IE8 unterstützt das nicht :checked Wähler.

    Benutzer1106925

    31. Dezember 2014 um 20:26 Uhr

  • Beachten Sie, dass die Anführungszeichen um rate sind nicht erforderlich.

    – mbomb007

    23. April 2015 um 16:38 Uhr

  • @KamranAhmed, bis Sie das Obige profilieren und/oder die Implementierung hinter dem Aufruf überprüfen können, können Sie nicht mehr über die Leistung des Obigen sagen als über jeden anderen Oneliner, der nativen Code aufruft. Wir haben nicht genügend Informationen, um darüber zu spekulieren, wie der Browser die Ortung durchführt :checked Element(e) — vielleicht hat es alles “gehasht und zwischengespeichert” und es ist a O(1) Betrieb. Wenn Sie es nicht profiliert haben, um anzugeben, dass die Abfragezeit mit der Anzahl der Elemente auf der Seite wächst, oder wenn Sie den Browser-Quellcode dahinter nicht verstehen, können Sie es nicht sagen.

    – Armen Michaeli

    25. Juni 2016 um 19:03 Uhr

Benutzeravatar von Joe F
Joe F

var rates = document.getElementById('rates').value;

Das Ratenelement ist a div, hat also keinen Wert. Dies ist wahrscheinlich, wo die undefined kommt aus.

Der checked Eigenschaft sagt Ihnen, ob das Element ausgewählt ist:

if (document.getElementById('r1').checked) {
  rate_value = document.getElementById('r1').value;
}

Oder

$("input[type="radio"][name="rate"]:checked").val();

  • In jquery wäre es $("input[name=rate]:checked").val()

    – Kamran Ahmed

    28. November 2013 um 10:31 Uhr


  • @mzalazar Nein, jedes Optionsfeld hat seine eigene ID, aber alle haben denselben Namen, wodurch sie in eine Gruppe eingeordnet werden. Wenn Sie also eines auswählen, wird das andere deaktiviert. Mit der Antwort von Kamran Ahmed können Sie überprüfen, welches der Optionsfelder in der Gruppe ausgewählt ist, und nur den Wert des ausgewählten (angekreuzten) erhalten.

    – Broko

    4. September 2014 um 18:21 Uhr

  • Mahdavipanahs Code direkt oben (mit [checked]) sucht nach der Attribut (dh Anfangszustand). Sie sollten stattdessen verwenden :checkeddas nach der sucht Eigentum (dh aktueller Stand), und das ist fast immer das, was Sie wollen.

    – Grasdoppelt

    29. Mai 2018 um 12:30 Uhr

  • In Javascript wäre es document.querySelectorAll("input[name=rate]:checked")[0].value

    – Vincent McNabb

    19. Juni 2019 um 5:38 Uhr

  • In Javascript brauchen Sie nicht zu bekommen alle davon aber: document.querySelector("input[name=rate]:checked").value.

    – WhyNotHugo

    1. Juni 2020 um 13:45 Uhr

Joes Benutzeravatar
Jo

Sie können den Wert erhalten, indem Sie die verwenden checked Eigentum.

var rates = document.getElementsByName('rate');
var rate_value;
for(var i = 0; i < rates.length; i++){
    if(rates[i].checked){
        rate_value = rates[i].value;
    }
}

  • Da nur ein Radio überprüft werden kann, würde ich normalerweise eins erwarten break oder return Aussage innerhalb der if blockieren, um weitere Durchgänge durch die Schleife zu stoppen. Ein kleiner Punkt, aber guter Stil.

    – RobP

    27. Mai 2015 um 3:26 Uhr


  • Dies ist die sauberste Standardimplementierung für diese Frage. Hut ab!

    – SeaWarrior404

    21. März 2019 um 7:48 Uhr

Daniels Benutzeravatar
Daniel

Für Sie, die am Rand leben:

Es gibt jetzt etwas namens a RadioNodeList und der Zugriff auf seine value-Eigenschaft gibt den Wert der aktuell geprüften Eingabe zurück. Dadurch entfällt die Notwendigkeit, zuerst die „geprüfte“ Eingabe herauszufiltern, wie wir in vielen der geposteten Antworten sehen.

Beispielformular

<form id="test">
    <label><input type="radio" name="test" value="A"> A</label>
    <label><input type="radio" name="test" value="B" checked> B</label>
    <label><input type="radio" name="test" value="C"> C</label>
</form>

Um den geprüften Wert abzurufen, könnten Sie etwa so vorgehen:

var form = document.getElementById("test");
alert(form.elements["test"].value);

Das JSFiddle zum Beweis: http://jsfiddle.net/vjop5xtq/

Bitte beachten Sie, dass dies in Firefox 33 implementiert wurde (alle anderen gängigen Browser scheinen dies zu unterstützen). Ältere Browser benötigen a Polyfill für RadioNodeList damit das richtig funktioniert.

Benutzeravatar von Beweelam
Beweelam

Wenn Sie JavaScript ohne jQuery verwenden, können Sie diesen Befehl verwenden:

document.querySelector("input[type="radio"][name=rate]:checked").value;

  • Diese Antwort ist unterschätzt, aber die beste!

    – Thanasis

    19. Februar 2022 um 11:30 Uhr

  • Perfekt! Funktioniert gut in Situationen, in denen Sie spontan Optionsfelder dynamisch erstellen und nicht wissen, wie viele Optionsfelder erstellt werden.

    – Joseph

    22. April 2022 um 13:26 Uhr


  • Das funktioniert, wir können es weiter vereinfachen, wenn Sie den Namen des Eingabeelements sicher kennen document.querySelector("input[name='rate']:checked")

    – Codekocher

    24. April 2022 um 2:55 Uhr

  • Hervorragende und vielseitige Lösung, wenn jQuery und andere Bibliotheken nicht verwendet werden und Sie den Overhead nicht hinzufügen möchten.

    – PolicyWatcher

    14. Dezember 2022 um 16:35 Uhr

Benutzeravatar von Malathy
Malathy

Diejenige, die für mich funktioniert hat, ist unten von api.jquery.com angegeben.

HTML

<input type="radio" name="option" value="o1">option1</input>
<input type="radio" name="option" value="o2">option2</input>

JavaScript

var selectedOption = $("input:radio[name=option]:checked").val()

Die Variable selectedOption enthält den Wert der ausgewählten Optionsschaltfläche (dh o1 oder o2).

  • Diese Antwort ist unterschätzt, aber die beste!

    – Thanasis

    19. Februar 2022 um 11:30 Uhr

  • Perfekt! Funktioniert gut in Situationen, in denen Sie spontan Optionsfelder dynamisch erstellen und nicht wissen, wie viele Optionsfelder erstellt werden.

    – Joseph

    22. April 2022 um 13:26 Uhr


  • Das funktioniert, wir können es weiter vereinfachen, wenn Sie den Namen des Eingabeelements sicher kennen document.querySelector("input[name='rate']:checked")

    – Codekocher

    24. April 2022 um 2:55 Uhr

  • Hervorragende und vielseitige Lösung, wenn jQuery und andere Bibliotheken nicht verwendet werden und Sie den Overhead nicht hinzufügen möchten.

    – PolicyWatcher

    14. Dezember 2022 um 16:35 Uhr

Eine andere (anscheinend ältere) Option ist die Verwendung des Formats: “document.nameOfTheForm.nameOfTheInput.value;” z.B document.mainForm.rads.value;

document.mainForm.onclick = function(){
    var radVal = document.mainForm.rads.value;
    result.innerHTML = 'You selected: '+radVal;
}
<form id="mainForm" name="mainForm">
    <input type="radio" name="rads" value="1" />
    <input type="radio" name="rads" value="2" />
    <input type="radio" name="rads" value="3" />
    <input type="radio" name="rads" value="4" />
</form>
<span id="result"></span>

Innerhalb eines Formulars können Sie über den Namen auf das Element verweisen. Ihr ursprünglicher HTML-Code enthält jedoch kein Formularelement.

Fiddle hier (funktioniert in Chrome und Firefox):
https://jsfiddle.net/Josh_Shields/23kg3tf4/1/

  • Dies ist das viel ältere Legacy-DOM-Format und sollte wirklich nicht mehr verwendet werden, da es auf bestimmte Elemente beschränkt ist und nicht mit aktuellen Standards Schritt hält.

    – j08691

    27. Februar 2015 um 14:50 Uhr

  • @ j08691 Ah okay, danke, dass du mich informiert hast. Dies ist eines der Dinge, die ich in einem Universitätskurs gelernt habe. Es ist wahrscheinlich besser, nichts von dort zu vertrauen und stattdessen nur Online-Referenzen zu verwenden.

    – JHS

    27. Februar 2015 um 14:56 Uhr

  • “… hält nicht mit aktuellen Standards Schritt.” ist kein überzeugendes Argument. Bitte näher erläutern. Wenn es funktioniert, funktioniert es. Es sind auch weniger Zeilen als die akzeptierte Antwort, die nur bestimmen, ob die ausgewählte Option „Festpreis“ ist.

    – Nullen und Einsen

    17. März 2015 um 19:45 Uhr

  • Die obige Geige scheint nicht mit dem Safari-Browser (7.1.4) zu funktionieren. Der Wert wird als undefiniert angezeigt, das Ändern der Optionsfeldzustände hat keinen Einfluss darauf.

    – Stuart R. Jefferys

    24. März 2015 um 19:50 Uhr

  • Ja, das funktioniert auch nicht mit dem Edge-Browser (40.15063.0.0). Wenn sie diesen Weg verworfen haben, erscheint es seltsam, weil dieser Weg einfacher und sinnvoller ist, da Optionsfelder ihrer Natur nach gruppiert werden. Die meisten anderen Antworten sehen genauso aus, als würden sie Kontrollkästchen aktivieren.

    – Michael K

    19. September 2017 um 19:38 Uhr

1446260cookie-checkSo erhalten Sie den Wert eines ausgewählten Optionsfelds

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy