Comment vérifier si un bouton radio de chaque groupe est coché dans jQuery?

Question

Plusieurs groupes ou boutons radio

<h1>Question 1</h1> 
<input type="radio" name="radio1" value="false" /> 
<input type="radio" name="radio1" value="true" /> 

<h1>Question 2</h1> 
<input type="radio" name="radio2" value="false" /> 
<input type="radio" name="radio2" value="true" /> 

Comment puis-je vérifier dans jQuery qu'un bouton radio dans chaque groupe est vérifié?

Merci.

Answer 1

Voici comment je le ferais:

var all_answered = true; 
$("input:radio").each(function(){ 
    var name = $(this).attr("name"); 
    if($("input:radio[name="+name+"]:checked").length == 0) 
    { 
    all_answered = false; 
    } 
}); 
alert(all_answered); 

De cette façon, vous n'avez pas besoin de compter sur les étiquettes de frères et soeurs ou parents. Si vos boutons radio sont mélangés avec n'importe quel tag, cela fonctionnera toujours. Vous pouvez play around with it.

Answer 2

Vous pouvez boucle à travers chaque question (<h1>) et en regardant à travers ses réponses à l'aide .nextUntil() avec .filter() pour voir s'il y a des :checked ceux, comme celui-ci:

var noAns = $("h1").filter(function() { 
       return $(this).nextUntil("h1").filter(":checked").length == 0; 
      }); 

Cela retournerait toutes les questions sans radio sélectionné pour eux, vous pouvez vérifier la .length de cela, si vous vouliez voir si une n'ont pas des réponses, par exemple:

if(noAns.length > 0) { 
    alert(noAns.length + " question(s) don't have answers!"); 
} 

You can give it a try here.

---

Vous pouvez également étendre cela un peu, par exemple mettant en lumière les questions qui ont été manqués:

if(noAns.css({ color: "red" }).length > 0) { 

et utiliser $("h1").css({ color: "" }) pour l'effacer le prochain tour, you can give it a try here.

Answer 3

Enveloppez chaque groupe radio avec un form ou div:

<div id="question1"> 
    <h1>Question 1</h1> 
    <input type="radio" name="radio1" value="false" /> 
    <input type="radio" name="radio1" value="true" /> 
</div> 

<div id="question2"> 
    <h1>Question 2</h1> 
    <input type="radio" name="radio2" value="false" /> 
    <input type="radio" name="radio2" value="true" /> 
</div> 

Puis, en jQuery:

if ($('#question1 input[type=radio]:checked')[0] != undefined && $('#question2 input[type=radio]:checked')[0] != undefined) { 
    ... 
} 

Answer 4

J'upvoted la réponse par "GG". Cependant, vous n'avez pas besoin de changer le code HTML .

Il suffit de sélectionner [nom] (qui doit être unique):

if ($("input[name='radio1']:checked")[0] != undefined && 
    $("input[name='radio2']:checked")[0] != undefined) { 
    ... 
}