Wie kann ich mit JavaScript prüfen, ob ein Optionsfeld ausgewählt ist?

Ich habe zwei Optionsfelder in einem HTML-Formular. Ein Dialogfeld erscheint, wenn eines der Felder leer ist. Wie kann ich prüfen, ob ein Optionsfeld ausgewählt ist?

Stellen wir uns vor, Sie haben HTML wie dieses

<input type="radio" name="gender" id="gender_Male" value="Male" />
<input type="radio" name="gender" id="gender_Female" value="Female" />

Für die Client-seitige Validierung, hier's einige Javascript zu überprüfen, welche ausgewählt ist:

if(document.getElementById('gender_Male').checked) {
  //Male radio button is checked
}else if(document.getElementById('gender_Female').checked) {
  //Female radio button is checked
}

Je nach der genauen Beschaffenheit Ihres Markups könnten die obigen Angaben noch effizienter gestaltet werden, aber das sollte für den Anfang genügen.


Wenn Sie nur sehen wollen, ob irgendein Radiobutton irgendwo auf der Seite ausgewählt ist, macht [PrototypeJS] (http://www.prototypejs.org/) es sehr einfach.

Hier's eine Funktion, die true zurückgibt, wenn mindestens ein Radio-Button irgendwo auf der Seite ausgewählt ist. Auch hier kann es sein, dass Sie die Funktion je nach Ihrem spezifischen HTML-Code anpassen müssen.

function atLeastOneRadio() {
    return ($('input[type=radio]:checked').size() > 0);
}

Für die serverseitige Validierung (denken Sie daran, Sie können nicht vollständig von Javascript für die Validierung abhängen!), würde es von der Sprache Ihrer Wahl abhängen, aber Sie würden den "gender"-Wert des Anfrage-Strings überprüfen.

Kommentare (8)

Mit jQuery würde es etwa so aussehen

if ($('input[name=gender]:checked').length > 0) {
    // do something here
}

Lassen Sie mich das in Teile zerlegen, um es deutlicher zu machen. jQuery verarbeitet die Dinge von links nach rechts.

input[name=gender]:checked
  1. input begrenzt es auf Eingabe-Tags.
  2. [name=gender] schränkt es auf Tags mit dem Namen gender innerhalb der vorherigen Gruppe ein.
  3. :checked schränkt es auf Checkboxen/Radio-Buttons ein, die in der vorherigen Gruppe ausgewählt wurden.

Wenn Sie dies ganz vermeiden wollen, markieren Sie eines der Optionsfelder im HTML-Code als angekreuzt (checked="checked"), wodurch gewährleistet wird, dass ein Optionsfeld immer ausgewählt ist.

Kommentare (6)

Ein Vanille-JavaScript-Weg

var radios = document.getElementsByTagName('input');
var value;
for (var i = 0; i < radios.length; i++) {
    if (radios[i].type === 'radio' && radios[i].checked) {
        // get value, set checked flag or do whatever you need to
        value = radios[i].value;       
    }
}
Kommentare (8)