Wie man den Wert eines ausgewählten Optionsfelds erhält

Question

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

Hier ist mein HTML:

   Festzinssatz
   Variabler Zinssatz
   Mehrfachzinssatz

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 erhalte immer undefined.

Answer 1

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

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

Answer 2

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

Das Element "rates" ist ein div, daher hat es keinen Wert. Vermutlich kommt das undefined daher.

Die Eigenschaft checked wird Ihnen sagen, 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();

Answer 3

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

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;
    }
}

Answer 4

Für euch Leute, die am Rande leben:

Es gibt jetzt etwas, das RadioNodeList genannt wird, und auf den Zugriff auf die value-Eigenschaft zurückgreifen wird den Wert des momentan ausgewählten Eingangs zurückgeben. Dies wird die Notwendigkeit entfernen, zuerst den 'checked' Eingang herauszufiltern, wie wir es in vielen der geposteten Antworten sehen.

Beispiel Formular

     A
     B
     C

Um den ausgewählten Wert abzurufen, könnten Sie etwas Ähnliches wie dies tun:

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

Der JSFiddle, um es zu beweisen: http://jsfiddle.net/vjop5xtq/

Bitte beachten Sie, dass dies in Firefox 33 implementiert wurde (alle anderen gängigen Browser scheinen es zu unterstützen). Ältere Browser erfordern ein Polyfill für RadioNodeList, damit dies ordnungsgemäß funktioniert.

Answer 5

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

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