Überprüfen des Werts der Optionsfeldgruppe über JavaScript?

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 rufe ich den Wert von genderüber JavaScript ab?

Wenn Sie eine Javascript-Bibliothek wie jQuery verwenden, ist dies sehr einfach:

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

Dieser Code wählt die checkedEingabe mit dem genderNamen aus und erhält sie value. Einfach, nicht wahr?

Live-Demo

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

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

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 er RadioNodeListnur von der Eigenschaft HTMLFormElement.elementsoder zurückgegeben HTMLFieldSetElement.elementswird. Sie müssen also eine Kennung für das Formular oder die Feldmenge haben, in die die Funkeingänge eingewickelt sind, um sie zuerst abzurufen.

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

document.getElementById("genderf").value;

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

document.getElementById("genderf").checked;

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

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>

Ohne Schleife:

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

reduce ist nur eine Funktion, die dem zweiten Argument des Rückrufs nacheinander Array-Elemente und der zuvor zurückgegebenen Funktion den Wert zuführt, während beim ersten Durchlauf der Wert des zweiten Arguments verwendet wird.

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