jQuery，检查是否选择了所有单选按钮组答案

【问题标题】：jQuery, check to see if all radiobutton groups are selectedjQuery，检查是否选择了所有单选按钮组
【发布时间】：2014-01-03 16:52:04
【问题描述】：

我有几个单选按钮组，当它们被选中时我需要运行一个脚本。

我使用以下脚本来检查其中一个是否被选中，如果没有，则对其进行着色。

如何编写代码，以便在检查所有单选按钮组后，运行脚本。

检查单选按钮组是否被选中的代码：

$('.aQuestion').each(function(){
  if($(this).find('input[type="radio"]:checked').length > 0)
    {
       alert("checked");
    }
  else
    {
       alert("not checked");
    }    
});

单选按钮组（大约有 90 个）：

<div class='aQuestion' id='div1'>
    <STRONG>1. </STRONG>
    <STRONG>Question</STRONG></br>
    <INPUT TYPE='radio' NAME='grp1' VALUE='0'>answer 1</br>
    <INPUT TYPE='radio' NAME='grp1' VALUE='1'>answer 2</br>
    <INPUT TYPE='radio' NAME='grp1' VALUE='2'>answer 3</br>
    <INPUT TYPE='radio' NAME='grp1' VALUE='3'>answer 4</br>
    <INPUT TYPE='radio' NAME='grp1' VALUE='4'>answer 5
</div>

<div class='aQuestion' id='div2'>
    <STRONG>2. </STRONG>
    <STRONG>Question</STRONG></br>
    <INPUT TYPE='radio' NAME='grp2' VALUE='0'>answer 1</br>
    <INPUT TYPE='radio' NAME='grp2' VALUE='1'>answer 2</br>
    <INPUT TYPE='radio' NAME='grp2' VALUE='2'>answer 3</br>
    <INPUT TYPE='radio' NAME='grp2' VALUE='3'>answer 4</br>
    <INPUT TYPE='radio' NAME='grp2' VALUE='4'>answer 5
</div>

提前致谢：D

【问题讨论】：

单选按钮名称不能相同
@dholakiyaankit 否则该小组将如何工作？
应该如何开始检查？提交表单时？span>
@dholakiyaankit 'name' 用于分组，可能你将它与 'id' 混淆了。
@Fabricio 是的，提交：jQuery('#submit').click(function(event)

标签： javascript jquery radio-button

【解决方案1】：

假设每个问题只有一个单选按钮组，您无需迭代问题即可确定它们都已被选中：

var $questions = $(".aQuestion");
if($questions.find("input:radio:checked").length === $questions.length) {
    // All Checked
}

jsFiddle 演示了上述内容。

【讨论】：

【解决方案2】：

试试这个：

$(document).on('ready change','.aQuestion',function(){
  if($(this).find('input[type="radio"]:checked').length > 0)
    {
       alert("checked");
    }
  else
    {
       alert("not checked");
    }    
});

【讨论】：

【解决方案3】：

最终代码：

jQuery('#submit').click(function(event)
    {
        event.preventDefault();

        $('.aQuestion').each(function()
        {
            if($(this).find('input[type="radio"]:checked').length > 0)
            {
                $(this).addClass( "madeChoice" ); // Run css that hides the group
            }
            else
            {   
                $(this).addClass( "didntMakeChoice" ); // Run css that highlight the group.                
            }
        });

        var $questions = $(".aQuestion");

        if($questions.find("input:radio:checked").length === $questions.length) 
        {
            alert("all checked"); // Send result to DB.
        }
        else 
        {
            alert("Not Checked"); // Do nothing.
        }
    });

【讨论】：