Comment puis-je vérifier si un bouton radio est sélectionné avec JavaScript ?

Question

J'ai deux boutons radio dans un formulaire HTML. Une boîte de dialogue apparaît lorsque l'un des champs est nul. Comment puis-je vérifier si un bouton radio est sélectionné ?

Answer 1

Imaginons que vous ayez du HTML comme celui-ci

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

Pour la validation côté client, voici un peu de Javascript pour vérifier lequel est sélectionné :

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

Ce qui précède pourrait être rendu plus efficace en fonction de la nature exacte de votre balisage, mais cela devrait suffire pour vous permettre de commencer.

---

Si vous cherchez juste à savoir si tout Le bouton radio est sélectionné partout sur la page, PrototypeJS rend les choses très faciles.

Voici une fonction qui retournera vrai si au moins un bouton radio est sélectionné quelque part sur la page. Là encore, il faudra peut-être adapter cette fonction en fonction de votre code HTML spécifique.

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

---

Pour la validation côté serveur (n'oubliez pas que vous ne pouvez pas dépendre entièrement de Javascript pour la validation). cela dépend de votre langue de prédilection, mais vous vérifierez que l'option gender de la chaîne de requête.

Answer 2

Avec jQuery ce serait quelque chose comme

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

Permettez-moi de le décomposer en plusieurs parties pour y voir plus clair. jQuery traite les choses de gauche à droite.

input[name=gender]:checked

1. input le limite aux balises d'entrée.
2. [name=gender] le limite aux étiquettes portant le nom du genre dans le groupe précédent.
3. :checked le limite aux cases à cocher/commandes radio qui sont sélectionnées dans le groupe précédent.

Si vous voulez éviter cela, cochez l'une des cases d'option ( checked="checked" ) dans le code HTML, ce qui garantirait qu'un bouton radio est toujours sélectionné.

Answer 3

Une méthode JavaScript à la vanille

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

Answer 4

Code HTML

<input type="radio" name="offline_payment_method" value="Cheque" >
<input type="radio" name="offline_payment_method" value="Wire Transfer" >

Code Javascript :

var off_payment_method = document.getElementsByName('offline_payment_method');
var ischecked_method = false;
for ( var i = 0; i < off_payment_method.length; i++) {
    if(off_payment_method[i].checked) {
        ischecked_method = true;
        break;
    }
}
if(!ischecked_method)   { //payment method button is not checked
    alert("Please choose Offline Payment Method");
}

Answer 5

Les scripts de cette page m'ont aidé à élaborer le script ci-dessous, qui me semble plus complet et universel. En gros, il validera n'importe quel nombre de boutons radio dans un formulaire, c'est-à-dire qu'il s'assurera qu'une option radio a été sélectionnée pour chacun des différents groupes radio du formulaire. Par exemple, dans le formulaire de test ci-dessous :

   <form id="FormID">

    Yes <input type="radio" name="test1" value="Yes">
    No <input type="radio" name="test1" value="No">

    <br><br>

    Yes <input type="radio" name="test2" value="Yes">
    No <input type="radio" name="test2" value="No">

   <input type="submit" onclick="return RadioValidator();">

Le script RadioValidator script s'assurera qu'une réponse a été donnée à la fois pour 'test1' et 'test2' avant de le soumettre. Vous pouvez avoir autant de groupes de radio dans le formulaire, et il ignorera tous les autres éléments du formulaire. Toutes les réponses manquantes s'afficheront dans une seule fenêtre d'alerte. Voilà, j'espère que cela aidera les gens. Toute correction de bogue ou modification utile est la bienvenue :)

<SCRIPT LANGUAGE="JAVASCRIPT">
function RadioValidator()
{
    var ShowAlert = '';
    var AllFormElements = window.document.getElementById("FormID").elements;
    for (i = 0; i < AllFormElements.length; i++) 
    {
        if (AllFormElements[i].type == 'radio') 
        {
            var ThisRadio = AllFormElements[i].name;
            var ThisChecked = 'No';
            var AllRadioOptions = document.getElementsByName(ThisRadio);
            for (x = 0; x < AllRadioOptions.length; x++)
            {
                 if (AllRadioOptions[x].checked && ThisChecked == 'No')
                 {
                     ThisChecked = 'Yes';
                     break;
                 } 
            }   
            var AlreadySearched = ShowAlert.indexOf(ThisRadio);
            if (ThisChecked == 'No' && AlreadySearched == -1)
            {
            ShowAlert = ShowAlert + ThisRadio + ' radio button must be answered\n';
            }     
        }
    }
    if (ShowAlert != '')
    {
    alert(ShowAlert);
    return false;
    }
    else
    {
    return true;
    }
}
</SCRIPT>