Wie kann ich den Wert eines ausgewählten Optionsfelds in JavaScript ermitteln?

Ermitteln des Werts des ausgewählten Optionsfelds

Um den Wert des ausgewählten Optionsfelds innerhalb einer Gruppe abzurufen, kann es bei herkömmlichen Methoden zu Schwierigkeiten kommen. Dieser Artikel bietet eine Lösung für dieses häufige Problem.

Betrachten Sie die folgende HTML-Struktur für eine Reihe von Optionsfeldern:

<div>
<p>Um den Wert der ausgewählten Schaltfläche mithilfe von JavaScript zu erhalten, können Sie Folgendes tun: Versuchen Sie zunächst diesen Code:</p>
<pre class="brush:php;toolbar:false">var rates = document.getElementById('rates').value;

Dieser Ansatz ruft jedoch die ID des enthaltenden div-Elements anstelle des ausgewählten Optionsfeldwerts ab. Um dieses Problem zu beheben, verwenden Sie den folgenden Code:

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

Dieser Code verwendet die querySelector-Methode, um das erste passende Optionsfeldelement innerhalb der Rate-Div auszuwählen und sicherzustellen, dass Sie speziell den Wert der aktivierten Schaltfläche erhalten.