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

jquery, radio-button

Solution

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

Problem

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?

Original source