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.

Osteen

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.

Visor

Yes, indeed the radio buttons were mixed up with other tags. But your solution worked. Thanks. – Osteen

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.

Read

Answer 3

Wrap each radio groups with a form or a 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>

Then in jQuery:

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

Manzanilla

Answer 4

I upvoted the answer by "GG." However, you don't need to change the HTML.

Just select by [name] (which should be unique):

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

Thrashing