Wie erhalte ich den Wert des ausgewählten Optionsfelds?

Lesezeit: 6 Minuten

Wie erhalte ich den Wert des ausgewahlten Optionsfelds
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 js:

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 werde immer undefinierter.

  • 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

    – Damian Pavlica

    26. September 2016 um 14:40 Uhr

1646311329 391 Wie erhalte ich den Wert des ausgewahlten Optionsfelds
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) Operation. 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.

    – amn

    25. Juni 2016 um 19:03 Uhr

Wie erhalte ich den Wert des ausgewahlten Optionsfelds
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.

Die 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 Kamran Ahmed answer können Sie überprüfen, welches der Optionsfelder in der Gruppe ausgewählt ist, und erhalten nur den Wert des ausgewählten (angekreuzten).

    – 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

1646311330 678 Wie erhalte ich den Wert des ausgewahlten Optionsfelds
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

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 ein polfyill for RadioNodeList damit das richtig funktioniert

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

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/

Verwenden document.querySelector(‘eingabe[type = radio]:markiert’).value; Um den Wert des ausgewählten Kontrollkästchens zu erhalten, können Sie andere Attribute verwenden, um den Wert zu erhalten, z Name = Geschlecht etc. bitte durchgehen unten Ausschnitt wird definitiv hilfreich für Sie sein,

Lösung

document.mainForm.onclick = function(){
    var gender = document.querySelector('input[name = gender]:checked').value;
    result.innerHTML = 'You Gender: '+gender;
}
<form id="mainForm" name="mainForm">
    <input type="radio" name="gender" value="Male" checked/>Male
    <input type="radio" name="gender" value="Female" />Female
    <input type="radio" name="gender" value="Others" />Others
</form>
<span id="result"></span>

Danke

923480cookie-checkWie erhalte ich den Wert des ausgewählten Optionsfelds?

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

Privacy policy