Πώς μπορώ να ελέγξω αν ένα κουμπί επιλογής είναι επιλεγμένο με JavaScript;

Ας υποθέσουμε ότι έχετε HTML όπως αυτή

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

Για την επικύρωση από την πλευρά του πελάτη, εδώ'είναι κάποια Javascript για να ελέγξετε ποιο από τα δύο είναι επιλεγμένο:

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

Τα παραπάνω θα μπορούσαν να γίνουν πιο αποτελεσματικά ανάλογα με την ακριβή φύση της σήμανσής σας, αλλά αυτό θα πρέπει να είναι αρκετό για να ξεκινήσετε.

Αν απλά θέλετε να δείτε αν οποιοδήποτε κουμπί επιλογής είναι επιλεγμένο οπουδήποτε στη σελίδα, το PrototypeJS το κάνει πολύ εύκολο.

Εδώ'είναι μια συνάρτηση που θα επιστρέψει true αν τουλάχιστον ένα κουμπί επιλογής είναι επιλεγμένο κάπου στη σελίδα. Και πάλι, αυτό μπορεί να χρειαστεί να προσαρμοστεί ανάλογα με την ειδική HTML σας.

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

Για την επικύρωση από την πλευρά του διακομιστή (θυμηθείτε, δεν μπορείτε να βασιστείτε εξ ολοκλήρου στην Javascript για την επικύρωση!), θα εξαρτηθεί από τη γλώσσα της επιλογής σας, αλλά θα ελέγχετε την τιμή gender της συμβολοσειράς αίτησης.

Με jQuery, θα ήταν κάτι σαν

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

Επιτρέψτε μου να το αναλύσω σε κομμάτια για να το καλύψω πιο ξεκάθαρα. Η jQuery επεξεργάζεται τα πράγματα από αριστερά προς τα δεξιά.

input[name=gender]:checked

1. `input το περιορίζει στις ετικέτες εισόδου.
2. [name=gender] το περιορίζει στις ετικέτες με το όνομα gender εντός της προηγούμενης ομάδας.
3. :checked το περιορίζει σε πλαίσια ελέγχου/κουμπιά ραδιοφώνου που είναι επιλεγμένα εντός της προηγούμενης ομάδας.

Αν θέλετε να το αποφύγετε εντελώς αυτό, σημειώστε ένα από τα κουμπιά επιλογής ως επιλεγμένο (checked="checked") στον κώδικα HTML, το οποίο θα εγγυάται ότι ένα κουμπί επιλογής είναι πάντα επιλεγμένο.

Ένας τρόπος για τη βανίλια JavaScript

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