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

In Javascript können wir die Werte mithilfe von Id's "getElementById()" erhalten. Im obigen Code, den Sie gepostet haben, enthält das Element den Namen, nicht die Id. Sie müssen es also wie folgt ändern:

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

Verwenden Sie rate_value entsprechend Ihrem Code.

Answer 2

Es ist etwa ein Jahr vergangen, seit die Frage gestellt wurde, aber ich dachte, eine wesentliche Verbesserung der Antworten wäre möglich. Ich finde dieses Skript am einfachsten und vielseitigsten, weil es überprüft, ob eine Schaltfläche ausgewählt wurde und wenn ja, was ihr Wert ist:

    Radio ausgewählt prüfen und dessen Wert

        function getRadioValue(groupName) {
            var radios = theFormName.elements[groupName];
            window.rdValue; // deklariert die globale Variable 'rdValue'
            for (var i=0; i<radios.length; i++) {
                var someRadio = radios[i];
                if (someRadio.checked) {
                    rdValue = someRadio.value;
                    break;
                }
                else rdValue = 'noRadioChecked';
            }
            if (rdValue == '10') {
                alert('10'); // oder: console.log('10')
            }
            else if (rdValue == 'noRadioChecked') {
                alert('kein Radio ausgewählt');
            }
        }

Sie können die Funktion auch innerhalb einer anderen Funktion aufrufen, wie hier gezeigt:

function doSomething() {
    getRadioValue('theRadioGroupName');
    if (rdValue == '10') {
        // etwas tun
    }
    else if (rdValue == 'noRadioChecked') {
        // etwas anderes tun
    }  
}

Answer 3

Unter der Annahme, dass Ihr Formularelement unten durch die Variable myForm referenziert wird und dass Ihre Optionsfelder den Namen "my-radio-button-group-name" teilen, ist der folgende JavaScript-Code rein und entspricht den Standards (obwohl ich nicht überprüft habe, ob er überall verfügbar ist):

myForm.elements.namedItem("my-radio-button-group-name").value

Das oben Genannte liefert den Wert eines ausgewählten Optionsfeldelements, falls vorhanden, oder ansonsten null. Der Schlüssel zur Lösung ist die namedItem-Funktion, die speziell mit Optionsfeldern funktioniert.

Siehe HTMLFormElement.elements, HTMLFormControlsCollection.namedItem und besonders RadioNodeList.value, da namedItem normalerweise ein RadioNodeList-Objekt zurückgibt.

(Ich verwende MDN, da es ermöglicht, die Einhaltung von Standards, zumindest in großem Maße, zu überwachen, und weil es einfacher zu verstehen ist als viele Veröffentlichungen der WhatWG und W3C)

Answer 4

Direktes Aufrufen eines Optionsfeldes mehrmals liefert den Wert des ersten Buttons, nicht des ausgewählten Buttons. Anstatt Optionsfelder zu durchlaufen, um zu sehen, welches ausgewählt ist, ziehe ich es vor, eine onclick JavaScript-Funktion aufzurufen, die eine Variable festlegt, die später abgerufen werden kann.

Die die folgendes aufruft:

var currentValue = 0;
function handleClick(myRadio) {
    currentValue = myRadio.value;
    document.getElementById("buttonSubmit").disabled = false;
}

Ein zusätzlicher Vorteil ist, dass ich Daten behandeln und/oder auf das Auswählen eines Buttons reagieren kann (in diesem Fall das Aktivieren des Senden -Buttons).

Answer 5

Sie können auch durch die Schaltflächen mit einer forEach-Schleife auf den Elementen iterieren

    var elements = document.getElementsByName('radioButton');
    var checkedButton;
    console.log(elements);
    elements.forEach(e => {
        if (e.checked) {
            // wenn das Optionsfeld ausgewählt ist, setzen Sie den Sortierstil
            checkedButton = e.value;
        }
    });