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

Eine weitere (anscheinend ältere) Option besteht darin, das Format zu verwenden: "document.nameOfTheForm.nameOfTheInput.value;" z.B. document.mainForm.rads.value;

document.mainForm.onclick = function(){
    var radVal = document.mainForm.rads.value;
    result.innerHTML = 'Sie haben ausgewählt: '+radVal;
}

Sie können auf das Element mit seinem Namen innerhalb eines Formulars verweisen. Ihr ursprüngliches HTML enthält jedoch kein Formularelement.

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

Answer 2

Das für mich funktionierende ist unten von api.jquery.com dargestellt.

HTML

option1
option2

JavaScript

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

Die Variable selectedOption wird den Wert des ausgewählten Optionsfelds enthalten (d.h. o1 oder o2)

Answer 3

Verwenden Sie document.querySelector('input[type = radio]:checked').value;, um den Wert des ausgewählten Kontrollkästchens zu erhalten. Sie können andere Attribute verwenden, um den Wert wie name = gender zu erhalten, usw. Bitte schauen Sie sich den unten stehenden Ausschnitt an. Es wird Ihnen sicherlich helfen.

Lösung

document.mainForm.onclick = function(){
    var gender = document.querySelector('input[name = gender]:checked').value;
    result.innerHTML = 'Ihr Geschlecht: '+gender;
}

    Männlich
    Weiblich
    Andere

Answer 4

HTML-Code

jQuery-Code

var value = $("input:radio[name=rdoName]:checked").val();

$("#btnSubmit").click(function() {
    var value = $("input:radio[name=rdoName]:checked").val();
    console.log(value);
    alert(value);
})

 YES
 NO

Sie erhalten

value="YES" // Wenn die Radio-Taste mit dem Wert "YES" ausgewählt ist
value="NO" // Wenn die Radio-Taste mit dem Wert "NO" ausgewählt ist

Answer 5

Kürzeste

[...rates.children].find(c=>c.checked).value

let v= [...rates.children].find(c=>c.checked).value

console.log(v);

   Fester Zinssatz
   Variabler Zinssatz
   Mehrfachzinssatz