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 un code 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 suffire pour vous aider à démarrer.
Si vous cherchez simplement à savoir si n'importe quel bouton radio est sélectionné n'importe où sur la page, PrototypeJS vous facilite la tâche.
Voici une fonction qui renvoie vrai si au moins un bouton radio est sélectionné quelque part dans 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 (rappelez-vous, vous ne pouvez pas dépendre entièrement de Javascript pour la validation !), cela dépend du langage de votre choix, mais vous vérifiez la valeur gender
de la chaîne de requête.
Avec [jQuery][1], ce serait comme suit
if ($('input[name=gender]:checked').length > 0) {
// do something here
}
Permettez-moi de décomposer ce texte en plusieurs parties pour le rendre plus clair. jQuery traite les choses de gauche à droite.
input[name=gender]:checked
input
][2] le limite aux balises d'entrée.[name=gender]
][3] limite aux balises dont le nom est gender dans le groupe précédent.:checked
][4] limite aux cases à cocher/boutons radio qui sont sélectionnés dans le groupe précédent.Si vous voulez éviter ce problème, marquez l'un des boutons radio comme étant coché (checked="checked"
) dans le code HTML, ce qui garantira qu'un bouton radio sera toujours sélectionné.
[1] : http://jquery.com/ [2] : http://docs.jquery.com/Selectors/element#element [3] : http://docs.jquery.com/Selectors/attributeEquals#attributevalue [4] : http://docs.jquery.com/Selectors/checked
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;
}
}