Javascript vérifier si le bouton radio a été coché?

Question

J'ai trouvé des scripts qui le font, mais ils ne fonctionnent qu'avec un nom de bouton radio, j'ai 5 jeux de boutons radio différents. Comment puis-je vérifier si son sélectionné en ce moment j'ai essayé sur le formulaire soumettre

if(document.getElementById('radiogroup1').value=="") { 
     alert("Please select option one"); 
     document.getElementById('radiogroup1').focus(); 
     return false; 
    } 

ne fonctionne pas.

Answer 1

Voici un bon tutoriel ->http://www.somacon.com/p143.php

---

// return the value of the radio button that is checked 
// return an empty string if none are checked, or 
// there are no radio buttons 
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 ""; 
} 

// set the radio button with the given value as being checked 
// do nothing if there are no radio buttons 
// if the given value does not exist, all the radio buttons 
// are reset to unchecked 
function setCheckedValue(radioObj, newValue) { 
    if(!radioObj) return; 
    var radioLength = radioObj.length; 
    if(radioLength == undefined) { 
     radioObj.checked = (radioObj.value == newValue.toString()); 
     return; 
    } 
    for(var i = 0; i < radioLength; i++) { 
     radioObj[i].checked = false; 
     if(radioObj[i].value == newValue.toString()) radioObj[i].checked = true; 
    } 
} 

Answer 2

var checked = false, radios = document.getElementsById('radiogroup1'); 
for (var i = 0, radio; radio = radios[i]; i++) { 
    if (radio.checked) { 
     checked = true; 
     break; 
    } 
} 

if (!checked) { 
    alert("Please select option one"); 
    radios.focus(); 
    return false; 
} 

return true; 

Answer 3

Êtes-vous ok avec jquery? Si oui:

$(document).ready(function(){ 
    if($('input[type=radio]:checked').length == 0) 
    { 
     alert("Please select option one");   
     document.getElementById('radiogroup1').focus();   
     return false;  
    } 
} 

Answer 4

Si vous avez votre coeur sur l'utilisation de JavaScript standards alors:

Définition de la fonction

var isSelected = function() { 
    var radioObj = document.formName.radioGroupName; 

    for(var i=0; i<radioObj.length; i++) { 
     if(radioObj[i].checked) { 
      return true; 
     } 
    } 

    return false; 
}; 

Utilisation

if(!isSelected()) { 
    alert('Please select an option from group 1 .'); 
} 

I'D suggérer usin g jQuery. Il a beaucoup d'options de sélection qui, lorsqu'elles sont utilisées ensemble, simplifient la majeure partie du code sur une seule ligne.

Autre solution

if($('input[type=radio][name=radioGroupName]:selected').length == 0) { 
    alert('Please select an option from group 1 .'); 
} 

Answer 5

Une fonction très simple est:

<script type="text/javascript"> 

function checkRadios(form) { 
    var btns = form.r0; 
    for (var i=0; el=btns[i]; i++) { 
    if (el.checked) return true; 
    } 
    alert('Please select a radio button'); 
    return false; 
} 
</script> 

<form id="f0" onsubmit="return checkRadios(this);"> 
    one<input type="radio" name="r0"><br> 
    two<input type="radio" name="r0"><br> 
    three<input type="radio" name="r0"><br> 
    <input type="submit"> 
</form> 

Cependant, vous Sould toujours avoir un bouton radio sélectionné par défaut (par exemple avec l'attribut select), certains utilisateurs les agents peuvent automatiquement sélectionner le premier bouton. Ensuite, vous avez juste besoin de vérifier si la valeur par défaut (généralement le premier) est cochée ou non.

Answer 6

Pourquoi ne pas utiliser un oneliner?

j'ai écrit ce code, il soumettre le formulaire si au moins une radio est vérifié:

(function(el){for(var i=el.length;i--;) if (el[i].checked) return el[i].form.submit()||1})(document.form_name.radio_name)||alert('please select item') 

Sinon, il fera une alerte. Ou vous pouvez le modifier à utiliser avec la forme de onsubmit:

return (function(el){for(var i=el.length;i--;) if (el[i].checked) return 1})(document.form_name.radio_name)||alert('please select item') 

Il suffit de remplacer form_name et radio_name en conséquence.

Voyez comment cela fonctionne: http://jsfiddle.net/QXeDv/5/