web-dev-qa-db-de.com

Wert der Optionsfeldgruppe über JavaScript prüfen?

Das mag albern und geradezu dumm erscheinen, aber ich kann 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 kann ich den Wert von gender über JavaScript abrufen?

javascripthtmlformsradio-button
58
Propeller

Wenn Sie eine Javascript-Bibliothek wie jQuery verwenden, ist das ganz einfach:

alert($('input[name=gender]:checked').val());

Dieser Code wählt den checked -Eingang mit dem gender -Namen aus und ruft dessen value ab. Einfach, nicht wahr?

Live-Demo

71
gdoron

Verwenden Sie document.querySelector () , wenn Sie Frameworks vermeiden möchten (was ich fast immer tun möchte).

document.querySelector('input[name="gender"]:checked').value
136
darelf

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;
 }

aktualisieren

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, dass RadioNodeList nur von der Eigenschaft HTMLFormElement.elements Oder HTMLFieldSetElement.elements Zurückgegeben wird. Sie müssen also eine Kennung für das Formular oder die Feldgruppe haben, in die die Funkeingänge eingebunden sind um es zuerst zu ergreifen.

84
Anthony

Um den Wert zu erhalten, würden Sie dies tun:

document.getElementById("genderf").value;

Aber um zu überprüfen, ob das Optionsfeld markiert oder ausgewählt ist:

document.getElementById("genderf").checked;
8
gideon

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>
3
Chris Smith

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;
  }
}
2
Sudhir Bastakoti

Ohne Schleife:

document.getElementsByName('gender').reduce(function(value, checkable) {
    if(checkable.checked == true) 
        value = checkable.value; 
    return value;
}, '');

reduce ist nur eine Funktion, die sequentiell Array-Elemente an das zweite Argument des Rückrufs und die zuvor zurückgegebene Funktion an value weiterleitet, während beim ersten Durchlauf der Wert des zweiten Arguments verwendet wird.

Das einzige Minus dieses Ansatzes ist, dass Reduce jedes von getElementsByName zurückgegebene Element durchläuft, auch nachdem es das ausgewählte Optionsfeld gefunden hat.

0
przemo_li