How to check if a radio button in each group is checked in jQuery?

Question

Multiple groups or radio buttons

<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" />

How can I check in jQuery that a radio button in each group is checked?

Thank you.

Answer 1

Here is how I would do it:

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);

That way you do not need to rely on sibling or parent tags. If your radio buttons are mixed up with whatever tag, it'll still work. You can play around with it.

Answer 2

You could loop through each question (<h1>) and looking through it's answers using .nextUntil() with .filter() to see if there any :checked ones, like this:

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

This would return all the questions with no radio selected for them, you could check the .length of that if you wanted to see if any don't have answers, for example:

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

You can give it a try here.

---

You can also extend this a bit, for example highlighting the questions that were missed:

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

and use $("h1").css({ color: "" }) to clear it the next round, you can give it a try here.