La validation d'un bouton radio est coché avec jQuery

Dans mon formulaire je un ensemble de boutons radio. Voici la marque:

<div class="optionHolder">
    <p class="optionName">Format</p>
    <div class="option checked">
        <input type="radio" name="fileType" value="avi" />
        <img src="images/avi.png" alt="" />
        <label>AVI</label>
    </div>
    <div class="option">
        <input type="radio" name="fileType" value="mov" />
        <img src="images/mov.png" alt="" />
        <label>MOV</label>
    </div>
    <div class="option">
        <input type="radio" name="fileType" value="mp4" />
        <img src="images/mp4.png" alt="" />
        <label>MP4</label>
    </div>
    <div class="option">
        <input type="radio" name="fileType" value="mp3" />
        <img src="images/mp3.png" alt="" />
        <label>MP3</label>
        </div>
</div>

Lorsque le formulaire est soumis, je veux vérifier que l'un d'entre eux est cochée. Quelle est la meilleure façon d'aller à ce sujet? Je pensais en boucle à travers eux tous et de faire un drapeau pour indiquer si l'un d'entre eux est cochée, puis vérifiez l'indicateur après la boucle, et si c'est faux jeter une erreur.

Toute aide est appréciée, merci.

OriginalL'auteur Will | 2010-09-23

20

Vous pouvez utiliser le length et l'égalité sélecteur d'attribut avec :checked sélecteur de filtre comme ceci:
```
if ($("input[name='fileType']:checked").length > 0){
  //one ore more checkboxes are checked
}
else{
 //no checkboxes are checked
}
```
Vous devez vérifier la longueur de > 0, pas seulement défini
Stodola: Vous devez avoir testé vers le bas avant de voter 🙂
Je l'ai fait. Et je n'ai pas droit de vote. Vous avez besoin de le comparer avec la valeur zéro. Juste vérifier si(.la longueur) vérifie si elle est définie ou non. Lorsque la valeur 0, il est toujours défini. Ce code ne fonctionnera pas de façon uniforme.
Stodola: Modifié que par ce que vous avez dit 🙂

OriginalL'auteur Sarfraz
5

démo

http://jsfiddle.net/Vq2jB/2/
```
var isChecked = jQuery("input[name=fileType]:checked").val();
```
Votre chemin fonctionne, mais si rien n'est sélectionné, votre indéfini au lieu de false pour isChecked. Si je vais tout le var isChecked, je veux qu'il soit vrai ou faux. Pas vrai ou non. Oui, si je vais si isChecked il fonctionne de la même manière, mais il se sent un peu hors de moi de toute façon.
j'ai ajouté une démo et résolu le problème.

OriginalL'auteur Praveen Prasad
4

Essayer le jQuery de Validation plugin. Il peut faire beaucoup pour vous et pour être vraiment utile pour beaucoup de différentes formes. Si vous voulez le faire très simplement:
```
if($("input[name=fileType]:checked").length > 0) {
   //Is Valid
}
```
Me battre en 20 secondes. 🙂
Ce genre de Questions obtiennent une réponse très rapide!

OriginalL'auteur ICodeForCoffee

Essayer:

var checkbox = $("input[@name='fileType']:checked");

if( checkbox.length > 0 ) {
    alert( checkbox.val() ); //checkbox value
} else {
    alert('Please select a format'); //error
}

http://jsfiddle.net/wE4RD/

OriginalL'auteur Naveed

2

Vraiment vieux, je sais. Si une radio de sélection n'est pas sélectionné, il retourne en tant que 'undefined', pas de '0'. Dans mon exemple je déclare une variable avec la valeur des boutons radio. Si cette valeur est undefined, le javascript renvoie la valeur false.
```
gender = $('input[name=gender]:checked').val();

if(typeof gender === 'undefined'){
    alert('Do not move on');
    $('input[name=gender]').css('box-shadow', '0 0 2px 0 red');
    return false;
}    
```
OriginalL'auteur David Aguirre
1

Je pense que $('input[name=fileType]:checked').length fera l'affaire.

OriginalL'auteur janosrusiczki
0

Vous pouvez vérifier pour voir si l'coché le bouton radio nom renvoie une valeur en jQuery:
```
if($("input[@name='fileType']:checked").val() != null){
    //button checked
}
```
-1 Non, val() retourne null lorsqu'aucun élément n'est trouvé, et certainement null !== ""
Mon mauvais, édité afin de montrer la bonne façon de vérifier.
Pourquoi est null toujours là?

OriginalL'auteur Andy Rose

Vous devez vous connecter pour publier un commentaire.