I have several radiobuttongroups, and I need to run a script when they are checked.

I use the following script to check if one of them is checked, if not, then color it.

How can I make the code, so that when all of the radiobuttongroups are checked, then run script.

The code that checks if the radiobuttongroups are checked:

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

The radiobuttongroups (there is about 90 of them):

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

Thanks in advance :D

I have several radiobuttongroups, and I need to run a script when they are checked.

I use the following script to check if one of them is checked, if not, then color it.

How can I make the code, so that when all of the radiobuttongroups are checked, then run script.

The code that checks if the radiobuttongroups are checked:

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

The radiobuttongroups (there is about 90 of them):

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

Thanks in advance :D

• javascript
• jquery
• radio-button

• Name of the radio butttons should not be same – Just code Commented Jan 3, 2014 at 8:23
• 2 @dholakiyaankit How would the group work otherwise? – CodingIntrigue Commented Jan 3, 2014 at 8:23
• How is the check supposed to be started? When submitting the form? – Fabricio Commented Jan 3, 2014 at 8:25
• @dholakiyaankit 'name' is for grouping, maybe you are confusing it with the 'id'. – RedHawkDK Commented Jan 3, 2014 at 8:42
• @Fabricio yes, with a submit: jQuery('#submit').click(function(event) – RedHawkDK Commented Jan 3, 2014 at 8:44

3 Answers 3

Assuming there is only one radio button group per question, you don't need to iterate the questions in order to find out they're all selected:

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

jsFiddle which demonstrates the above.

Try this:

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

Final code:

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