checking at least one radio button is selected from each group (with jquery)

Question

I'm dynamically pulling and displaying radio button quesitons on a form (separated into different sections by jquery tabs).

So there are lots of 2, 3, 4, 5 etc radio buttons together, which have the same 'name' but different ids.

When you hit next between the sections, I want to check that at least one radio button has been selected for each group.

( When the form loads, the radio buttons have none checked by default and it has to be this way. )

I can loop through the current section's radio buttons but I'm not sure how to easily check that one has been checked for each group?

Yoon

Answer 1

In the absence of any relationship between elements, or how to find the group names, I can only give you a pointer, but this should work (the check's triggered by clicking on the element of id="nextButton", but obviously this can be customised to any other appropriate event, such as $('form').submit(), for example):

$(document).ready(
function(){
  $('#nextButton').click(
    function(){

    var radioName = something; // use this if there's a relationship between the element
                               // triggering this check and the radio buttons

      if ($('input[name='+ radioName +']:checked').length) {
           // at least one of the radio buttons was checked
           return true; // allow whatever action would normally happen to continue
      }
      else {
           // no radio button was checked
           return false; // stop whatever action would normally happen
      }
    }
  );
}
);

Closestool

Answer 2

$("input[@name='the_name']:checked").length;

Naquin

The @ syntax has been deprecated since jQuery 1.1.4 (in the comments section). – Closestool

Answer 3

if ($("input:checked").length < Num_of_groups)
{
    alert ("Please select atleast one radio button in each group");
    return false;
}

Oblation

Answer 4

Input names must be same name: sendType

Check this out:

$('#submitBtn').click(function(e){

   alert ($('input:radio[name="sendType"]:checked').length);

   if ($('input:radio[name="sendType"]:checked').length > 0) {
       //GO AHEAD

   } else {
       alert("SELECT ONE!");
       e.preventDefault();
   }

});

Shellfish

Answer 5

use this code

remember to put button outside the form

$("#buttonid").click(function(){
                    var check = true;
                    $("input:radio").each(function(){
                        var name= $(this).attr('name');
                        if($("input:radio[name="+name+"]:checked").length){
                            check = true;
                        }
                        else{
                            check=false;
                        }
                    });

                    if(check){
                        $("#formid").submit();
                    }else{
                        alert('Please select at least one answer in each question.');
                    }
                });

Interest

You want to do "var check = false;" as initial state... – Ephialtes

Answer 6

Try this

if ($('input[name='+radioName+']:checked').length == '0'){
    // do something 
    return false;
}

Infra

This basically does the same as the accepted answer, it is just worse. Why would you compare a Number field with a string literal? – Cutwater

Answer 7

If you wanna get the value of the checked radio button:

var GetGenderValueAsRAdioButton = $('input[name=gender]:checked').val();

Tempi