如何使用jQuery检查每个单选按钮组中是否已选中单选按钮？

Question

多个组或单选按钮

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

我如何在jQuery中检查每个组中的单选按钮是否已选择？

谢谢。

- iHello

Answer 1

以下是我的做法：

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

这样你就不需要依赖于兄弟或父标签。如果你的单选按钮与其他任何标签混在一起，它仍然可以工作。你可以尝试一下。

- Gabriel

---

是的，确实单选按钮与其他标签混淆了。但是你的解决方案有效。谢谢。 - iHello

Answer 2

您可以循环遍历每个问题（<h1>），并使用 .nextUntil() 和 .filter() 查找其答案，以查看是否有任何:checked的选项，如下所示：

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

这会返回所有没有被选中单选按钮的问题，如果你想看看是否有任何问题没有答案，可以检查 .length，例如：

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

你可以在这里尝试一下：{{link1}}。

---

您还可以进一步扩展这个功能，例如突出显示未回答的问题：

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

使用$("h1").css({ color: "" })在下一轮中清除它，你可以在这里尝试。

- Nick Craver

Answer 3

将每个单选组用 form 或 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>

然后在jQuery中：

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

- GG.

Answer 4

我给“GG”回答点了赞。但是你不需要改变HTML。

只需通过[name]进行选择（应该是唯一的）：

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

- JoePC