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

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é?

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 du 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 être suffisant pour vous aider à démarrer.

Si vous cherchez simplement à voir si un bouton radio est sélectionné n'importe où sur la page, PrototypeJS le rend très facile.

Voici une fonction qui retournera true si au moins un bouton radio est sélectionné quelque part sur la page. Encore une fois, cela pourrait devoir être modifié en fonction de votre code HTML spécifique.

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

Pour la validation côté serveur (rappelez-vous, vous ne pouvez pas dépendre entièrement de Javascript pour la validation!) , Cela dépendra de la langue de votre choix, mais vous ne feriez que vérifier la gendervaleur de la chaîne de requête.

Avec jQuery , ce serait quelque chose comme

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

Permettez-moi de décomposer cela en morceaux pour le couvrir plus clairement. 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 balises portant le nom gender dans le groupe précédent.
3. :checked le limite aux cases à cocher / boutons radio sélectionnés dans le groupe précédent.

Si vous voulez éviter cela complètement, marquez l'un des boutons radio comme coché ( checked="checked") dans le code HTML, ce qui garantirait qu'un bouton radio est toujours sélectionné.

Une manière JavaScript 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;       
    }
}

J'essaie juste d'améliorer la solution de Russ Cam avec du sucre sélecteur CSS ajouté avec le JavaScript vanille.

var radios = document.querySelectorAll('input[type="radio"]:checked');
var value = radios.length>0? radios[0].value: null;

Pas vraiment besoin de jQuery ici, querySelectorAll est désormais largement pris en charge.

Edit: correction d'un bug avec le sélecteur css, j'ai inclus les guillemets, bien que vous puissiez les omettre, dans certains cas, vous ne pouvez pas, il est donc préférable de les laisser.

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

Vous pouvez utiliser ce script simple. Vous pouvez avoir plusieurs boutons radio avec les mêmes noms et différentes valeurs.

var checked_gender = document.querySelector('input[name = "gender"]:checked');

if(checked_gender != null){  //Test if something was checked
alert(checked_gender.value); //Alert the value of the checked.
} else {
alert('Nothing checked'); //Alert, nothing was checked.
}

Les scripts de cette page m'ont aidé à trouver le script ci-dessous, qui je pense est plus complet et universel. Fondamentalement, il validera n'importe quel nombre de boutons radio dans un formulaire, ce qui signifie 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 s'assurera qu'une réponse a été donnée pour "test1" et "test2" avant de se soumettre. Vous pouvez avoir autant de groupes radio dans le formulaire, et il ignorera tous les autres éléments du formulaire. Toutes les réponses radio manquantes s'afficheront dans une seule fenêtre d'alerte. Voilà, j'espère que cela aide les gens. Toutes corrections de bugs ou modifications utiles sont les bienvenues :)

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

Notez ce comportement avec jQuery lors de l'obtention des valeurs d'entrée radio:

$('input[name="myRadio"]').change(function(e) { // Select the radio input group

    // This returns the value of the checked radio button
    // which triggered the event.
    console.log( $(this).val() ); 

    // but this will return the first radio button's value,
    // regardless of checked state of the radio group.
    console.log( $('input[name="myRadio"]').val() ); 

});

Donc, $('input[name="myRadio"]').val()ne renvoie pas la valeur vérifiée de l'entrée radio, comme vous pouvez vous y attendre - il renvoie la valeur du premier bouton radio.

Avec mootools ( http://mootools.net/docs/core/Element/Element )

html:

<input type="radio" name="radiosname" value="1" />
<input type="radio" name="radiosname" value="2" id="radiowithval2"/>
<input type="radio" name="radiosname" value="3" />

js:

// Check if second radio is selected (by id)
if ($('radiowithval2').get("checked"))

// Check if third radio is selected (by name and value)
if ($$('input[name=radiosname][value=3]:checked').length == 1)


// Check if something in radio group is choosen
if ($$('input[name=radiosname]:checked').length > 0)


// Set second button selected (by id)
$("radiowithval2").set("checked", true)

c'est une fonction utilitaire que j'ai créée pour résoudre ce problème

    //define radio buttons, each with a common 'name' and distinct 'id'. 
    //       eg- <input type="radio" name="storageGroup" id="localStorage">
    //           <input type="radio" name="storageGroup" id="sessionStorage">
    //param-sGroupName: 'name' of the group. eg- "storageGroup"
    //return: 'id' of the checked radioButton. eg- "localStorage"
    //return: can be 'undefined'- be sure to check for that
    function checkedRadioBtn(sGroupName)
    {   
        var group = document.getElementsByName(sGroupName);

        for ( var i = 0; i < group.length; i++) {
            if (group.item(i).checked) {
                return group.item(i).id;
            } else if (group[0].type !== 'radio') {
                //if you find any in the group not a radio button return null
                return null;
            }
        }
    }

Ce serait valable pour les boutons radio partageant le même nom, aucun JQuery nécessaire.

var x = Array.prototype.filter.call(document.getElementsByName('checkThing'), function(x) { return x.checked })[0];

Si nous parlons de cases à cocher et que nous voulons une liste avec les cases cochées partageant un nom:

var x = Array.prototype.filter.call(document.getElementsByName('checkThing'), function(x) { return x.checked });

if(document.querySelectorAll('input[type="radio"][name="name_of_radio"]:checked').length < 1)

juste une petite modification de Mark Biek;

CODE HTML

<form name="frm1" action="" method="post">
  <input type="radio" name="gender" id="gender_Male" value="Male" />
  <input type="radio" name="gender" id="gender_Female" value="Female" / >
  <input type="button" value="test"  onclick="check1();"/>
</form>

et code Javascript pour vérifier si le bouton radio est sélectionné

<script type="text/javascript">
    function check1() {            
        var radio_check_val = "";
        for (i = 0; i < document.getElementsByName('gender').length; i++) {
            if (document.getElementsByName('gender')[i].checked) {
                alert("this radio button was clicked: " + document.getElementsByName('gender')[i].value);
                radio_check_val = document.getElementsByName('gender')[i].value;        
            }        
        }
        if (radio_check_val === "")
        {
            alert("please select radio button");
        }        
    }
</script>

Il existe un moyen très sophistiqué de valider si l'un des boutons radio est vérifié avec ECMA6 et la méthode .some() .

Html:

<input type="radio" name="status" id="marriedId" value="Married" />
<input type="radio" name="status" id="divorcedId" value="Divorced" />

Et javascript:

let htmlNodes = document.getElementsByName('status');

let radioButtonsArray = Array.from(htmlNodes);

let isAnyRadioButtonChecked = radioButtonsArray.some(element => element.checked);

isAnyRadioButtonCheckedsera truesi certains des boutons radio sont cochés et falsesi aucun d'entre eux n'est coché.

Retourne tous les éléments cochés dans le bouton radio

  Array.from(document.getElementsByClassName("className")).filter(x=>x['checked']);

http://www.somacon.com/p143.php/

function getCheckedValue(radioObj) {
    if(!radioObj)
        return "";
    var radioLength = radioObj.length;
    if(radioLength == undefined)
        if(radioObj.checked)
            return radioObj.value;
        else
            return "";
    for(var i = 0; i < radioLength; i++) {
        if(radioObj[i].checked) {
            return radioObj[i].value;
        }
    }
    return "";
}

Avec JQuery, une autre façon de vérifier l'état actuel des boutons radio est d'obtenir l'attribut «vérifié».

Par exemple:

<input type="radio" name="gender_male" value="Male" />
<input type="radio" name="gender_female" value="Female" />

Dans ce cas, vous pouvez vérifier les boutons en utilisant:

if ($("#gender_male").attr("checked") == true) {
...
}

Ce code alertera le bouton radio sélectionné lorsque le formulaire sera soumis. Il a utilisé jQuery pour obtenir la valeur sélectionnée.

$("form").submit(function(e) {
  e.preventDefault();
  $this = $(this);

  var value = $this.find('input:radio[name=COLOR]:checked').val();
  alert(value);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <input name="COLOR" id="Rojo" type="radio" value="red">
  <input name="COLOR" id="Azul" type="radio" value="blue">
  <input name="COLOR" id="Amarillo" type="radio" value="yellow">
  <br>
  <input type="submit" value="Submit">
</form>

J'ai utilisé l' opérateur de propagation et certains pour vérifier qu'au moins un élément du tableau réussit le test.

Je partage pour qui l'inquiétude.

var checked = [...document.getElementsByName("gender")].some(c=>c.checked);
console.log(checked);

<input type="radio" name="gender" checked value="Male" />
<input type="radio" name="gender"  value="Female" / >

Voici la solution qui est développée pour ne pas poursuivre la soumission et envoyer une alerte si les boutons radio ne sont pas cochés. Bien sûr, cela signifierait que vous devez les décocher pour commencer!

if(document.getElementById('radio1').checked) {
} else if(document.getElementById('radio2').checked) {
} else {
  alert ("You must select a button");
  return false;
}

N'oubliez pas de définir l'identifiant ('radio1', 'radio2' ou tout autre nom) dans le formulaire pour chacun des boutons radio ou le script ne fonctionnera pas.

Un exemple:

if (!checkRadioArray(document.ExamEntry.level)) { 
    msg+="What is your level of entry? \n"; 
    document.getElementById('entry').style.color="red"; 
    result = false; 
} 

if(msg==""){ 
    return result;  
} 
else{ 
    alert(msg) 
    return result;
} 

function Radio() { 
    var level = radio.value; 
    alert("Your level is: " + level + " \nIf this is not the level your taking then please choose another.") 
} 

function checkRadioArray(radioButtons) { 
    for(var r=0;r < radioButtons.length; r++) { 
        if (radioButtons[r].checked) { 
            return true; 
        } 
    } 
    return false; 
} 

La forme

<form name="teenageMutant">
  <input type="radio" name="ninjaTurtles"/>
</form>

Le scénario

if(!document.teenageMutant.ninjaTurtles.checked){
  alert('get down');
}

Le violon: http://jsfiddle.net/PNpUS/

Je veux juste m'assurer que quelque chose est sélectionné (en utilisant jQuery):

// html
<input name="gender" type="radio" value="M" /> Male <input name="gender" type="radio" value="F" /> Female

// gender (required)
var gender_check = $('input:radio[name=gender]:checked').val();
if ( !gender_check ) {
    alert("Please select your gender.");
    return false;
}

Si vous voulez du JavaScript vanille, ne voulez pas encombrer votre balisage en ajoutant des identifiants sur chaque bouton radio, et ne vous souciez que des navigateurs modernes , l'approche fonctionnelle suivante est un peu plus de bon goût pour moi qu'une boucle for:

<form id="myForm">
<label>Who will be left?
  <label><input type="radio" name="output" value="knight" />Kurgan</label>
  <label><input type="radio" name="output" value="highlander" checked />Connor</label>
</label>
</form>

<script>
function getSelectedRadioValue (formElement, radioName) {
    return ([].slice.call(formElement[radioName]).filter(function (radio) {
        return radio.checked;
    }).pop() || {}).value;
}

var formEl = document.getElementById('myForm');
alert(
   getSelectedRadioValue(formEl, 'output') // 'highlander'
)
</script>

Si aucun n'est coché, il reviendra undefined(bien que vous puissiez changer la ligne ci-dessus pour retourner autre chose, par exemple, pour être falserenvoyé, vous pouvez changer la ligne pertinente ci-dessus en:) }).pop() || {value:false}).value;.

Il y a aussi l'approche prospective de polyfill puisque l' interface RadioNodeList devrait faciliter l'utilisation d'une valuepropriété sur la liste des éléments radio enfants du formulaire (que l'on trouve dans le code ci-dessus formElement[radioName]), mais qui a ses propres problèmes: Comment polyfill RadioNodeList ?

Cela fonctionne également, en évitant d'appeler un identifiant d'élément mais en l'appelant en utilisant comme élément de tableau.

Le code suivant est basé sur le fait qu'un tableau, nommé groupe radiobuttons, est composé d'éléments radiobuttons dans le même ordre que celui déclaré dans le document html:

if(!document.yourformname.yourradioname[0].checked 
   && !document.yourformname.yourradioname[1].checked){
    alert('is this working for all?');
    return false;
}

HTML:

<label class="block"><input type="radio" name="calculation" value="add">+</label>
<label class="block"><input type="radio" name="calculation" value="sub">-</label>
<label class="block"><input type="radio" name="calculation" value="mul">*</label>
<label class="block"><input type="radio" name="calculation" value="div">/</label>

<p id="result"></p>

JAVAScript:

var options = document.getElementsByName("calculation");

for (var i = 0; i < options.length; i++) {
    if (options[i].checked) {
        // do whatever you want with the checked radio
        var calc = options[i].value;
        }
    }
    if(typeof calc == "undefined"){
        document.getElementById("result").innerHTML = " select the operation you want to perform";
        return false;
}

Donnez des boutons radio, le même nom mais des ID différents.

var verified1 = $('#SOME_ELEMENT1').val();
var verified2 = $('#SOME_ELEMENT2').val();
var final_answer = null;
if( $('#SOME_ELEMENT1').attr('checked') == 'checked' ){
  //condition
  final_answer = verified1;
}
else
{
  if($('#SOME_ELEMENT2').attr('checked') == 'checked'){
    //condition
    final_answer = verified2;
   }
   else
   {
     return false;
   }
}