开发者

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

开发者 https://www.devze.com 2023-01-12 15:37 出处:网络
Multiple groups or radio buttons <h1>Question 1</h1> <input type=\"radio\" name=\"radio1\" value=\"false\" />

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" />
<inp开发者_开发知识库ut type="radio" name="radio2" value="true" />

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

Thank you.


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.


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.


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) {
    ...
}


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) {
  ...
}
0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号