Propeller
Das mag albern und geradezu dumm erscheinen, aber ich kann anscheinend nicht herausfinden, wie ich den Wert einer Optionsfeldgruppe in meinem HTML-Formular über JavaScript überprüfen kann. Ich habe folgenden Code:
<input type="radio" id="genderm" name="gender" value="male" />
<label for="genderm">Male</label>
<input type="radio" id="genderf" name="gender" value="female" />
<label for="genderf">Female</label>
Wie erhalte ich den Wert von gender per Javascript?
Liebling
Verwenden document.querySelector() wenn Sie Frameworks vermeiden möchten (was ich fast immer tun möchte).
document.querySelector('input[name="gender"]:checked').value
Das braucht mehr Upvotes, .querySelector() ist die Vanille-Antwort auf so viele jQuery-Fragen …
– Marian
18. November 2016 um 3:47 Uhr
Dies ist das erste Mal, dass ich mich noch nie zuvor angemeldet habe, nur um jemandem eine Stimme zu geben.
– Falsch verstanden
25. März 2017 um 15:07 Uhr
@Missverstanden dasselbe hier. Musste mich anmelden, um darüber abzustimmen
– Courtney
24. Januar 2018 um 19:44 Uhr
Diese Antwort tut mir leid, dass die Antwort auf eine Frage später nicht von der Community oder Moderatoren geändert werden kann. Natürlich bei allem Respekt vor der gewählten Antwort (gegenüber beiden an dieser Entscheidung beteiligten Personen).
– Axonn
8. Juni 2018 um 23:41 Uhr
Ich liebe diese Antwort. Keine Notwendigkeit für umständliche Frameworks, wenn Sie wissen, was Sie tun. 🙂
– Mark Micallef
24. Juni 2021 um 0:17 Uhr
Antonius
In reinem Javascript:
var genders = document.getElementsByName("gender");
var selectedGender;
for(var i = 0; i < genders.length; i++) {
if(genders[i].checked)
selectedGender = genders[i].value;
}
In reinem Javascript ohne Schleife, mit neueren (und möglicherweise noch nicht unterstützten) RadioNodeList :
var form_elements = document.getElementById('my_form').elements;
var selectedGender = form_elements['gender'].value;
Der einzige Haken ist das RadioNodeList wird nur von der zurückgegeben HTMLFormElement.elements oder HTMLFieldSetElement.elements -Eigenschaft, also müssen Sie eine Kennung für das Formular oder Feldset haben, in das die Funkeingaben eingeschlossen sind, um es zuerst zu erfassen.
Plus eine für die Beantwortung des Titels und keine jQuery-Antwort.
– driechel
9. Dezember 2014 um 11:20 Uhr
gdoron unterstützt Monica
Wenn Sie eine Javascript-Bibliothek wie jQuery verwenden, ist es sehr einfach:
alert($('input[name=gender]:checked').val());
Dieser Code wählt die aus checked Eingabe mit gender Namen und bekommt es value. Einfach, nicht wahr?
Die Frage war “Javascript”, nicht “jQuery”.
– MattiSG
11. Februar 2016 um 8:19 Uhr
@MattiSG, und da es akzeptiert wurde, hat es wohl dem Fragesteller (und vielen anderen Leuten) geholfen …
– gdoron unterstützt Monica
11. Februar 2016 um 9:09 Uhr
Nun, ich bin auf diese Frage gestoßen, als ich nach einer Javascript-Lösung suchte. Die Frage ist nicht mit jQuery gekennzeichnet. Als ich die Frage las, wurde jQuery nicht erwähnt. Ich denke nicht, dass die akzeptierte Antwort eine Abhängigkeit von jQuery haben sollte. Aber das ist die Macht der Masse, weißt du 😉 Meine eigene Ablehnung wird nicht viel für all die vielen anderen Menschen ändern, denen du mit dieser Antwort geholfen hast 🙂
– MattiSG
12. Februar 2016 um 9:46 Uhr
Überprüfen Sie die Antworten von @darelf auf pure js .. !!
– Bino Kochumol Varghese
14. Juli 2016 um 12:59 Uhr
JQuery war damals okay.
– Benutzer2422869
13. April 2017 um 13:43 Uhr
Gideon
Um den Wert zu erhalten, würden Sie Folgendes tun:
document.getElementById("genderf").value;
Aber um zu prüfen, ob der Radiobutton ist geprüft oder ausgewählt:
document.getElementById("genderf").checked;
Chris Smith
Wenn Sie Ihre Formularelemente in ein Formular-Tag mit einem Namensattribut einschließen, können Sie den Wert einfach mit document.formName.radioGroupName.value abrufen.
<form name="myForm">
<input type="radio" id="genderm" name="gender" value="male" />
<label for="genderm">Male</label>
<input type="radio" id="genderf" name="gender" value="female" />
<label for="genderf">Female</label>
</form>
<script>
var selected = document.forms.myForm.gender.value;
</script>
Dies scheint Cross-Browser-Probleme zu haben.
– jfriend00
23. Januar 2016 um 18:51 Uhr
Dies scheint auch in Chrome nicht mehr zu funktionieren. Ich bin sicher, es hat einmal getan. 🙁
– Chris Smith
11. Februar 2016 um 8:59 Uhr
du hast vergessen .forms und .elements! so sollte es sein document.forms.myForm.gender.value
– kal
14. November 2016 um 4:19 Uhr
Ihre Antwort scheint so viel einfacher zu verstehen als die anderen, danke :).
– Liam
4. September 2019 um 16:24 Uhr
Sudhir Bastakoti
Versuchen:
var selectedVal;
for( i = 0; i < document.form_name.gender.length; i++ )
{
if(document.form_name.gender[i].checked)
selectedVal = document.form_name.gender[i].value; //male or female
break;
}
}
Dies scheint Cross-Browser-Probleme zu haben.
– jfriend00
23. Januar 2016 um 18:51 Uhr
Dies scheint auch in Chrome nicht mehr zu funktionieren. Ich bin sicher, es hat einmal getan. 🙁
– Chris Smith
11. Februar 2016 um 8:59 Uhr
du hast vergessen .forms und .elements! so sollte es sein document.forms.myForm.gender.value
– kal
14. November 2016 um 4:19 Uhr
Ihre Antwort scheint so viel einfacher zu verstehen als die anderen, danke :).
– Liam
4. September 2019 um 16:24 Uhr
Jorjon
Eine andere Lösung für ES5+
[...document.getElementsByName("gender")].find(input => input.checked).value;
