skip to Main Content

I need to validate 7 groups of Radio Buttons to make sure at least 2 groups were selected; if not show an alert.

I also have some other radio buttons on my page not related to these. They should not be included in this check.

Basically, I need at least 2 groups selected from all 7 groups.

I have tried a few methods posted in the community but none of them have worked.

$('.counter').text($(':radio:checked').length);

$('input[type=radio]').change(function() {
  $('.counter').text($(':radio:checked').length);
});

// I also tried this:

/*
  $('input[type="radio"]').on('click',function(){
   $('.totleft').text($('input[type="radio"]:checked').length+'/'+($('input[type="radio"]').length/2))
  });
/*/
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div>
  <input class="group1" id="a" name="group1" value="Accept" type="radio">
  <input class="group1" id="b" name="group1" value="Reject" type="radio">
  <input class="group1" id="c" name="group1" value="Accept" type="radio">
  <input class="group1" id="d" name="group1" value="Reject" type="radio">
</div>
<div>
  <input class="group2" id="e" name="group2" value="Accept" type="radio">
  <input class="group2" id="f" name="group2" value="Reject" type="radio">
  <input class="group2" id="g" name="group2" value="Accept" type="radio">
  <input class="group2" id="h" name="group2" value="Reject" type="radio">
</div>
<div>
  <input class="group3" id="i" name="group3" value="Accept" type="radio">
  <input class="group3" id="j" name="group3" value="Reject" type="radio">
  <input class="group3" id="k" name="group3" value="Accept" type="radio">
  <input class="group3" id="l" name="group3" value="Reject" type="radio">
</div>
<div>
  <input class="group4" id="m" name="group4" value="Accept" type="radio">
  <input class="group4" id="n" name="group4" value="Reject" type="radio">
  <input class="group4" id="o" name="group4" value="Accept" type="radio">
  <input class="group4" id="p" name="group4" value="Reject" type="radio">
</div>
<div>
  <input class="group5" id="q" name="group5" value="Accept" type="radio">
  <input class="group5" id="r" name="group5" value="Reject" type="radio">
  <input class="group5" id="s" name="group5" value="Accept" type="radio">
  <input class="group5" id="t" name="group5" value="Reject" type="radio">
</div>
<div>
  <input class="group6" id="u" name="group6" value="Accept" type="radio">
  <input class="group6" id="v" name="group6" value="Reject" type="radio">
  <input class="group6" id="w" name="group6" value="Accept" type="radio">
  <input class="group6" id="x" name="group6" value="Reject" type="radio">
</div>
<div>
  <input class="group7" id="y" name="group7" value="Accept" type="radio">
  <input class="group7" id="z" name="group7" value="Reject" type="radio">
  <input class="group7" id="aa" name="group7" value="Accept" type="radio">
  <input class="group7" id="bb" name="group7" value="Reject" type="radio">
</div>
```
function VALIDATE_FORM() {
myFunction7();
var starttime = $("#start_time_1").val();
var endtime = $("#end_time_1").val();

//console.log(starttime);

if (starttime == '') {
    Swal.fire({
        title: "Start Time",
        text: "is REQUIRED!",
        icon: "error",
        showConfirmButton: false,
        allowOutsideClick: false,
        allowEscapeKey: false,
        timer: 3000,
        returnFocus: false,
    });

    document.getElementById('start_time_1').focus();
    return false;
} else {
    return true;
}
};
```

4

Answers


  1. This should work:

    var atLeastTwoAnswered = true;
    $("input:radio[name^='group']").each(function(){
      var name = $(this).attr("name");
      if($("input:radio[name="+name+"]:checked").length < 2)
      {
        atLeastTwoAnswered = false;
      }
    });
    alert(atLeastTwoAnswered);
    

    While the alert will trigger on window load, you could add this to a certain event.

    Login or Signup to reply.
  2. Perhaps you can give id attribute of input elements like this and run a for loop to check the status of radio buttons of each group:

    let totalCheckedGroupCount = 0;
    
    for(let i=1; i<=3; i++) {
      const radioEl1 = document.getElementById("g_"+i+"_0");
      const radioEl2 = document.getElementById("g_"+i+"_1");
      
      if(radioEl1 && radioEl2 && radioEl1.checked || radioEl2.checked) {
        totalCheckedGroupCount++;
      }
    }
    
    console.log(totalCheckedGroupCount);
    <input id="g_1_0" name="group1" value="Accept" type="radio">
    <input id="g_1_1" name="group1" value="Reject" type="radio" checked>
    
    <input id="g_2_0" name="group2" value="Accept" type="radio">
    <input id="g_2_1" name="group2" value="Reject" type="radio" checked>
    
    <input id="g_3_0" name="group3" value="Accept" type="radio">
    <input id="g_3_1" name="group3" value="Reject" type="radio">
    Login or Signup to reply.
  3. To do what you require you can wrap all the radio inputs in a form. When the form is submit you can check the length of all :selected radios and then allow/disallow the form submission as normal.

    By wrapping the radios in a form, it restrict this logic so that it will ignore any other radio controls on your page.

    let $container = $('#radio-container');
    let getSelectedRadioCount = () => $container.find(':radio:checked').length;
    let updateRadioCounter = () => $('.counter').text(getSelectedRadioCount());
    
    updateRadioCounter(); // on load
    $container.find(':radio').on('change', updateRadioCounter); // on change
    
    $('button').on('click', e => {
      e.preventDefault();
      if (getSelectedRadioCount() < 2) {
        console.log('You need to select at last 2 radio options...');
      } else {
        console.log('Submit form here...');
      }
    });
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
    <div id="radio-container">
      <div>
        <input class="group1" id="a" name="group1" value="Accept" type="radio">
        <input class="group1" id="b" name="group1" value="Reject" type="radio">
        <input class="group1" id="c" name="group1" value="Accept" type="radio">
        <input class="group1" id="d" name="group1" value="Reject" type="radio">
      </div>
      <div>
        <input class="group2" id="e" name="group2" value="Accept" type="radio">
        <input class="group2" id="f" name="group2" value="Reject" type="radio">
        <input class="group2" id="g" name="group2" value="Accept" type="radio">
        <input class="group2" id="h" name="group2" value="Reject" type="radio">
      </div>
      <div>
        <input class="group3" id="i" name="group3" value="Accept" type="radio">
        <input class="group3" id="j" name="group3" value="Reject" type="radio">
        <input class="group3" id="k" name="group3" value="Accept" type="radio">
        <input class="group3" id="l" name="group3" value="Reject" type="radio">
      </div>
      <div>
        <input class="group4" id="m" name="group4" value="Accept" type="radio">
        <input class="group4" id="n" name="group4" value="Reject" type="radio">
        <input class="group4" id="o" name="group4" value="Accept" type="radio">
        <input class="group4" id="p" name="group4" value="Reject" type="radio">
      </div>
      <div>
        <input class="group5" id="q" name="group5" value="Accept" type="radio">
        <input class="group5" id="r" name="group5" value="Reject" type="radio">
        <input class="group5" id="s" name="group5" value="Accept" type="radio">
        <input class="group5" id="t" name="group5" value="Reject" type="radio">
      </div>
      <div>
        <input class="group6" id="u" name="group6" value="Accept" type="radio">
        <input class="group6" id="v" name="group6" value="Reject" type="radio">
        <input class="group6" id="w" name="group6" value="Accept" type="radio">
        <input class="group6" id="x" name="group6" value="Reject" type="radio">
      </div>
      <div>
        <input class="group7" id="y" name="group7" value="Accept" type="radio">
        <input class="group7" id="z" name="group7" value="Reject" type="radio">
        <input class="group7" id="aa" name="group7" value="Accept" type="radio">
        <input class="group7" id="bb" name="group7" value="Reject" type="radio">
      </div>
      <div class="counter"></div>
      <button type="button">Check if valid</button>
    </div>
    Login or Signup to reply.
  4. You can map the selected groups per div, filter checked groups and count the result. The snippet does not use JQuery and uses event delegation

    const checkedGroups = _ => [...document.querySelectorAll(`#radio-container div`)]
      .map(v => v.querySelector(`[type='radio']:checked`))
      .filter(v => v).length;
    document.addEventListener(`click`, handle);
    
    function handle(evt) {
      if (evt.target.type === `radio`) {
        const nChecked = checkedGroups();
        document.querySelector(`.counter`)
          .textContent = `Nr of checked groups: ${
            nChecked} ${nChecked >= 2 ? `(valid)` : ``}`;
        if (nChecked >= 2) {
          document.querySelector(`#cando`).removeAttribute(`disabled`);
        }    
      }
    }
    <div id="radio-container">
      <div>
        <input class="group1" id="a" name="group1" value="Accept" type="radio">
        <input class="group1" id="b" name="group1" value="Reject" type="radio">
        <input class="group1" id="c" name="group1" value="Accept" type="radio">
        <input class="group1" id="d" name="group1" value="Reject" type="radio">
      </div>
      <div>
        <input class="group2" id="e" name="group2" value="Accept" type="radio">
        <input class="group2" id="f" name="group2" value="Reject" type="radio">
        <input class="group2" id="g" name="group2" value="Accept" type="radio">
        <input class="group2" id="h" name="group2" value="Reject" type="radio">
      </div>
      <div>
        <input class="group3" id="i" name="group3" value="Accept" type="radio">
        <input class="group3" id="j" name="group3" value="Reject" type="radio">
        <input class="group3" id="k" name="group3" value="Accept" type="radio">
        <input class="group3" id="l" name="group3" value="Reject" type="radio">
      </div>
      <div>
        <input class="group4" id="m" name="group4" value="Accept" type="radio">
        <input class="group4" id="n" name="group4" value="Reject" type="radio">
        <input class="group4" id="o" name="group4" value="Accept" type="radio">
        <input class="group4" id="p" name="group4" value="Reject" type="radio">
      </div>
      <div>
        <input class="group5" id="q" name="group5" value="Accept" type="radio">
        <input class="group5" id="r" name="group5" value="Reject" type="radio">
        <input class="group5" id="s" name="group5" value="Accept" type="radio">
        <input class="group5" id="t" name="group5" value="Reject" type="radio">
      </div>
      <div>
        <input class="group6" id="u" name="group6" value="Accept" type="radio">
        <input class="group6" id="v" name="group6" value="Reject" type="radio">
        <input class="group6" id="w" name="group6" value="Accept" type="radio">
        <input class="group6" id="x" name="group6" value="Reject" type="radio">
      </div>
      <div>
        <input class="group7" id="y" name="group7" value="Accept" type="radio">
        <input class="group7" id="z" name="group7" value="Reject" type="radio">
        <input class="group7" id="aa" name="group7" value="Accept" type="radio">
        <input class="group7" id="bb" name="group7" value="Reject" type="radio">
      </div>
      <div class="counter"></div>
      <button type="button" id="cando" disabled>submit</button>
    </div>
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search