Count How many Radio Buttons were checked per group (Minimum of 2 Total Selections)-CodePudding

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  id="a" name="group1" value="Accept" type="radio">
  <input  id="b" name="group1" value="Reject" type="radio">
  <input  id="c" name="group1" value="Accept" type="radio">
  <input  id="d" name="group1" value="Reject" type="radio">
</div>
<div>
  <input  id="e" name="group2" value="Accept" type="radio">
  <input  id="f" name="group2" value="Reject" type="radio">
  <input  id="g" name="group2" value="Accept" type="radio">
  <input  id="h" name="group2" value="Reject" type="radio">
</div>
<div>
  <input  id="i" name="group3" value="Accept" type="radio">
  <input  id="j" name="group3" value="Reject" type="radio">
  <input  id="k" name="group3" value="Accept" type="radio">
  <input  id="l" name="group3" value="Reject" type="radio">
</div>
<div>
  <input  id="m" name="group4" value="Accept" type="radio">
  <input  id="n" name="group4" value="Reject" type="radio">
  <input  id="o" name="group4" value="Accept" type="radio">
  <input  id="p" name="group4" value="Reject" type="radio">
</div>
<div>
  <input  id="q" name="group5" value="Accept" type="radio">
  <input  id="r" name="group5" value="Reject" type="radio">
  <input  id="s" name="group5" value="Accept" type="radio">
  <input  id="t" name="group5" value="Reject" type="radio">
</div>
<div>
  <input  id="u" name="group6" value="Accept" type="radio">
  <input  id="v" name="group6" value="Reject" type="radio">
  <input  id="w" name="group6" value="Accept" type="radio">
  <input  id="x" name="group6" value="Reject" type="radio">
</div>
<div>
  <input  id="y" name="group7" value="Accept" type="radio">
  <input  id="z" name="group7" value="Reject" type="radio">
  <input  id="aa" name="group7" value="Accept" type="radio">
  <input  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;
}
};
```

CodePudding user response：

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

CodePudding user response：

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.

CodePudding user response：

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  id="a" name="group1" value="Accept" type="radio">
    <input  id="b" name="group1" value="Reject" type="radio">
    <input  id="c" name="group1" value="Accept" type="radio">
    <input  id="d" name="group1" value="Reject" type="radio">
  </div>
  <div>
    <input  id="e" name="group2" value="Accept" type="radio">
    <input  id="f" name="group2" value="Reject" type="radio">
    <input  id="g" name="group2" value="Accept" type="radio">
    <input  id="h" name="group2" value="Reject" type="radio">
  </div>
  <div>
    <input  id="i" name="group3" value="Accept" type="radio">
    <input  id="j" name="group3" value="Reject" type="radio">
    <input  id="k" name="group3" value="Accept" type="radio">
    <input  id="l" name="group3" value="Reject" type="radio">
  </div>
  <div>
    <input  id="m" name="group4" value="Accept" type="radio">
    <input  id="n" name="group4" value="Reject" type="radio">
    <input  id="o" name="group4" value="Accept" type="radio">
    <input  id="p" name="group4" value="Reject" type="radio">
  </div>
  <div>
    <input  id="q" name="group5" value="Accept" type="radio">
    <input  id="r" name="group5" value="Reject" type="radio">
    <input  id="s" name="group5" value="Accept" type="radio">
    <input  id="t" name="group5" value="Reject" type="radio">
  </div>
  <div>
    <input  id="u" name="group6" value="Accept" type="radio">
    <input  id="v" name="group6" value="Reject" type="radio">
    <input  id="w" name="group6" value="Accept" type="radio">
    <input  id="x" name="group6" value="Reject" type="radio">
  </div>
  <div>
    <input  id="y" name="group7" value="Accept" type="radio">
    <input  id="z" name="group7" value="Reject" type="radio">
    <input  id="aa" name="group7" value="Accept" type="radio">
    <input  id="bb" name="group7" value="Reject" type="radio">
  </div>
  <div ></div>
  <button type="button">Check if valid</button>
</div>

CodePudding user response：

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  id="a" name="group1" value="Accept" type="radio">
    <input  id="b" name="group1" value="Reject" type="radio">
    <input  id="c" name="group1" value="Accept" type="radio">
    <input  id="d" name="group1" value="Reject" type="radio">
  </div>
  <div>
    <input  id="e" name="group2" value="Accept" type="radio">
    <input  id="f" name="group2" value="Reject" type="radio">
    <input  id="g" name="group2" value="Accept" type="radio">
    <input  id="h" name="group2" value="Reject" type="radio">
  </div>
  <div>
    <input  id="i" name="group3" value="Accept" type="radio">
    <input  id="j" name="group3" value="Reject" type="radio">
    <input  id="k" name="group3" value="Accept" type="radio">
    <input  id="l" name="group3" value="Reject" type="radio">
  </div>
  <div>
    <input  id="m" name="group4" value="Accept" type="radio">
    <input  id="n" name="group4" value="Reject" type="radio">
    <input  id="o" name="group4" value="Accept" type="radio">
    <input  id="p" name="group4" value="Reject" type="radio">
  </div>
  <div>
    <input  id="q" name="group5" value="Accept" type="radio">
    <input  id="r" name="group5" value="Reject" type="radio">
    <input  id="s" name="group5" value="Accept" type="radio">
    <input  id="t" name="group5" value="Reject" type="radio">
  </div>
  <div>
    <input  id="u" name="group6" value="Accept" type="radio">
    <input  id="v" name="group6" value="Reject" type="radio">
    <input  id="w" name="group6" value="Accept" type="radio">
    <input  id="x" name="group6" value="Reject" type="radio">
  </div>
  <div>
    <input  id="y" name="group7" value="Accept" type="radio">
    <input  id="z" name="group7" value="Reject" type="radio">
    <input  id="aa" name="group7" value="Accept" type="radio">
    <input  id="bb" name="group7" value="Reject" type="radio">
  </div>
  <div ></div>
  <button type="button" id="cando" disabled>submit</button>
</div>