Wie erhalte ich effizient den Wert eines ausgewählten Optionsfelds in JavaScript?

Zugriff auf den Wert von Optionsfeldern in JavaScript

Beim Arbeiten mit Optionsfeldeingaben in JavaScript ist es wichtig, den Wert der ausgewählten Option abzurufen. Es kann jedoch frustrierend sein, bei solchen Implementierungen auf Probleme zu stoßen. Lassen Sie uns ein häufiges Problem und seine Lösung untersuchen.

Problem

Bedenken Sie den folgenden Codeausschnitt:

function findSelection(field) {
    var test = 'document.theForm.' + field;
    var sizes = test;
    for (i=0; i < sizes.length; i++) {
        if (sizes[i].checked==true) {
            return sizes[i].value;
        }
    }
}

Trotz seines beabsichtigten Zwecks ist dieser Code Gibt stets „undefiniert“ zurück, wenn versucht wird, auf das ausgewählte Optionsfeld zuzugreifen Wert.

Lösung

Um dieses Problem zu lösen, können wir einen modernen Ansatz mithilfe der querySelector()-Methode nutzen:

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

Diese Zeile Der Code ruft den Wert des ausgewählten Optionsfelds mithilfe des :checked-Selektors im querySelector() ab. Methode.

Vorteile

Diese Lösung bietet mehrere Vorteile:

• Browserkompatibilität:Diese Methode funktioniert nahtlos überall verschiedene Webbrowser.
• Einfachheit: Es ist ein prägnanter und unkomplizierter Ansatz, der komplexe Schleifen oder Iteratoren überflüssig macht.
• Dynamisch: Das aktivierte Optionsfeld wird dynamisch ausgewählt, unabhängig von seiner Position im DOM.

Implementierung

HTML:

<form action="#n" name="theForm">
    <label for="gender">Gender: </label>
    <input type="radio" name="genderS" value="1" checked> Male
    <input type="radio" name="genderS" value="0" > Female<br><br>
    <a href="javascript: submitForm()">Search</a>
</form>

JavaScript:

function submitForm() {
    var gender = document.querySelector('input[name="genderS"]:checked').value;
    alert(gender);
}

Hinweis: Du Sie müssen in dieser Implementierung keinen jQuery-Pfad einschließen.

Das obige ist der detaillierte Inhalt vonWie erhalte ich effizient den Wert eines ausgewählten Optionsfelds in JavaScript?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!