web-dev-qa-db-fra.com

jquery: comment vérifier si tous les boutons radio d'un div sont sélectionnés

mon html ressemble à ceci

<div id="div1">
  <input type="radio" name="r1" value="v1" />
  <input type="radio" name="r1" value="v2" />
  <input type="radio" name="r1" value="v3" />

  <input type="radio" name="r2" value="v1" />
  <input type="radio" name="r2" value="v2" />
  <input type="radio" name="r2" value="v3" />

  <input type="radio" name="r3" value="v1" />
  <input type="radio" name="r3" value="v2" />
  <input type="radio" name="r3" value="v3" />
</div>

les boutons radio sont générés dynamiquement sur mon code html, donc dans cette division, je ne sais pas combien de boutons radio je possède.

je veux m'assurer que l'utilisateur sélectionnera une valeur pour chacun d'entre eux avant de soumettre le formulaire. Comment puis-je vérifier que tous les boutons radio de ma div ont une valeur cochée?

Je vous remercie

javascriptjquery
21
trrrrrrm

Restructurez légèrement votre code HTML - placez chaque groupe de radio dans (par exemple) un div. Ensuite, vous pouvez simplement faire quelque chose comme ceci pour valider le formulaire lorsque l'utilisateur le soumet:

if ($('div:not(:has(:radio:checked))').length) {
    alert("At least one group is blank");
}

Bien sûr, cela peut être modifié de différentes manières pour s'adapter à votre code HTML. L'idée venait de Trouvez tous les groupes de radio qui n'ont pas été sélectionnés

21
Bennett McElwee
$(":radio").change(function() {
    var names = {};
    $(':radio').each(function() {
        names[$(this).attr('name')] = true;
    });
    var count = 0;
    $.each(names, function() { 
        count++;
    });
    if ($(':radio:checked').length === count) {
        alert("all answered");
    }
}).change();

Démo: http://jsfiddle.net/yFaAj/15/

29
karim79

Solution herehttp://jsfiddle.net/QxdnZ/1/

    var checked = $("#div1 :radio:checked");
    var groups = [];
    $("#div1 :radio").each(function() {
        if (groups.indexOf(this.name) < 0) {
            groups.Push(this.name);
        }
    });
    if (groups.length == checked.length) {
        alert('all are checked!');
    }
    else {
        var total = groups.length - checked.length;
        var a = total>1?' groups are ':' group is ';

        alert(total + a + 'not selected');
    }
7
Carls Jr.

Validez le formulaire lorsque l'utilisateur le soumet en utilisant ce code de validation.

var blank = false;
$("input:radio").each(function() {
    var val = $('input:radio[name=' + this.name + ']:checked').val();
    if (val === undefined) {
        blank = true;
        return false;
    }
});
alert(blank ? "At least one group is blank" : "All groups are checked");

Nous obtenons d’abord le nom de tous les groupes de boutons radio, puis vérifions que chacun d’entre eux a une valeur. (En fait, nous effectuons plusieurs vérifications, mais cela n'a pas vraiment d'importance.)

1
Bennett McElwee

Vous cherchez quelque chose dans ce sens? http://jsfiddle.net/gXsZp/3/

<div id="div1">
   Q1
  <input type="radio" name="r1" value="v1" />
  <input type="radio" name="r1" value="v2" />
  <input type="radio" name="r1" value="v3" />
  <br/>Q2

  <input type="radio" name="r2" value="v1" />
  <input type="radio" name="r2" value="v2" />
  <input type="radio" name="r2" value="v3" />
    <br/>Q3  

  <input type="radio" name="r3" value="v1" />
  <input type="radio" name="r3" value="v2" />
  <input type="radio" name="r3" value="v3" />
</div>
<br/>
<input id="btn" type="submit" text="submit"/>



$('#btn').click(function(){
    if ( $('#div1 input:radio:checked').size() == 3 )    
        return true;
    return false;
});
1
ingo

Essaye ça:

function check(){
    var allCheck = true;
    if($("#div1 :radio:checked").length==0){
        allCheck=false;
    }
    $("#div1 :radio").each(function(){
    for(var i=0;i<$("#div1 :radio:checked").length;i++)
    if($(this).attr("name")===$($("#div1 :radio:checked")[i]).attr("name")) 
                break;
    else if(i==$("#div1 :radio:checked").length-1) 
                allCheck = false;
    });

    return allCheck;
}
0
zhzhzhh

Essaye celui-là:

$('input:radio', $('#div1')).each(function() {
    if(name && name == $(this).attr('name'))
        return true; // Skip when checking the same element name. 

    name = $(this).attr('name');

    if(! $('input:radio[name="' + name + '"]:checked').length) {
        alert('Oops, you missed some input there.. [' + name + ']');
        return false;
    }
});

Il passera en revue chaque bouton radio pour vérifier la radio cochée et se cassera dès qu’il détectera un groupe de radio non coché (première erreur trouvée). Mais si vous préférez obtenir toutes les erreurs (pas seulement la première erreur trouvée), supprimez simplement return false.

0
o q