multiple checkboxs required to click submit js conditionals

Question

I am currently trying to make a form where multiple things are required like name email etc i am not having any trouble sorting those ones out but when it comes to the check boxes i struggle to figure out how to make it so that two or more checkboxes are required to the submit the form this is the way i have been trying to do it. after checkbox.value i have tried <2. also here is the code for the checkboxes in html.

       if (checkbox.value   ) {
messages.push('Two intrests must be selected')

}

       <div class="form-check form-check-column">
     <label class="form-check-label">
       <input class="form-check-input" type="checkbox" name="Sports" id="Box" value=1> Sports
     </label>
     <label class="form-check-label">
       <input class="form-check-input" type="checkbox" name="Reading" id="Box" value=1> Reading
      </label>
      <label class="form-check-label">
       <input class="form-check-input" type="checkbox" name="Hacking" id="Box" value=1> Hacking
      </label>
      <label class="form-check-label">
        <input class="form-check-input" type="checkbox" name="Gaming" id="Box" value=1> Gaming
      </label>
      <label class="form-check-label">
        <input class="form-check-input" type="checkbox" name="Other" id="Box" value=1 > Other
      </label>

Does this answer your question? [Using the HTML5 "required" attribute for a group of checkboxes?](https://stackoverflow.com/questions/6218494/using-the-html5-required-attribute-for-a-group-of-checkboxes) — theBittor, Nov 05 '20 at 14:13
this would be good however it is multiple and only two of the 5 need to be selected @theBittor — joshwebdev, Nov 05 '20 at 14:19
Id has to be unique. You will have to do this with JS, did you try anything yet? What didn't work? — cloned, Nov 05 '20 at 14:21
I was about to try giving each one a unique id however then I wouldnt even know how add them together to still make the goal of atleast two being selected then you can submit the form — joshwebdev, Nov 05 '20 at 14:31
all i need to know is how to code so that when two or more are selected it will work where as if less than two are not selected then you will not be able to submit the form and a message will pop up — joshwebdev, Nov 05 '20 at 14:36

Simone Rossaini · Answer 1 · 2020-11-05T14:47:36.433

1

You can add a simple id to container of checkbox then for each checked checkbox plus a counter +1 for check if is equal or plus 2 like:

function Check()
{
  var howmuch = 0;
  var container = document.getElementById('container');
  var checkbox = container.querySelectorAll('input[type="checkbox"]');
//You can use short without var like  document.getElementById('container').querySelectorAll('input[type="checkbox"]')
  checkbox.forEach(function(item) {
    if(item.checked){howmuch += 1}
  });
  
  if(howmuch >= 2){
    console.log('ok');
  }else{
    console.log('MUST BE 2 or +');
  }

}

<div class="form-check form-check-column" id="container">
  <label class="form-check-label">
    <input class="form-check-input" type="checkbox" name="Sports" id="Box" value=1> Sports
  </label>
  <label class="form-check-label">
    <input class="form-check-input" type="checkbox" name="Reading" id="Box" value=1> Reading
  </label>
  <label class="form-check-label">
    <input class="form-check-input" type="checkbox" name="Hacking" id="Box" value=1> Hacking
  </label>
  <label class="form-check-label">
    <input class="form-check-input" type="checkbox" name="Gaming" id="Box" value=1> Gaming
  </label>
  <label class="form-check-label">
    <input class="form-check-input" type="checkbox" name="Other" id="Box" value=1 > Other
  </label>
</div>
<button onClick="Check();">simulate form</button>

obviously you will change my console.log with an action like alert if is not ok and form submit if is ok (remember to use event.preventdefault() for prevent submit before check if all is ok)

edited Nov 05 '20 at 14:47

answered Nov 05 '20 at 14:41

Simone Rossaini

8,115
1
13
34

this is kinda of what im looking for but it doesnt seem to be working, it is sayin check undifined, also would it be possible to put >= rather than > so it would work if only two are checked aswell as more than – joshwebdev Nov 05 '20 at 14:54
this code work, if not you paste wrong or edit it wrong post your code – Simone Rossaini Nov 05 '20 at 14:55
Uncaught ReferenceError: Check is not defined onclick http://127.0.0.1:5500/index.html?firstName=fs&lastName=fs&lastName= – joshwebdev Nov 05 '20 at 14:57
function Check() { var howmuch = 0; var container = document.getElementById('container'); var checkbox = container.querySelectorAll('input[type="checkbox"]'); checkbox.forEach(function(item) { if(item.checked){howmuch += 1} }); if(howmuch >= 2){ console.log('ok'); } else{ messages.push('Two must be selected') } } if (messages.length > 0){ e.preventDefault() errorElement.innerText = messages.join(', ') } – joshwebdev Nov 05 '20 at 14:58
– joshwebdev Nov 05 '20 at 15:01
Submit – joshwebdev Nov 05 '20 at 15:01
function Check() { var howmuch = 0; var container = document.getElementById('container'); var checkbox = container.querySelectorAll('input[type="checkbox"]'); checkbox.forEach(function(item) { if(item.checked){howmuch += 1} }); if(howmuch >= 2){ console.log('ok') }else{ messages.push('Two or more intrests must be selected') } if (howmuch <= 1) { e.preventDefault() errorElement.innerText = messages.join(', ') } } – joshwebdev Nov 05 '20 at 15:30
thats how im trying it now but i do not see a message with the others – joshwebdev Nov 05 '20 at 15:30
i can't see that because is offline path. seems like you wrong to use onclick. did you put the script out of page? put event.preventdefault before call Check function – Simone Rossaini Nov 05 '20 at 18:53
Josh Have you did it? – Simone Rossaini Nov 13 '20 at 13:59

score 0 · Accepted Answer · answered Nov 19 '20 at 11:48

var howmuch = 0;
var container = document.getElementById('container');
var checkbox = container.querySelectorAll('input[type="checkbox"]');
  checkbox.forEach(function(item) {
if(item.checked){howmuch += 1}
});

if(howmuch < 2){
  messages.push('Two to three intersts must be selected')
} else if (howmuch > 3) {
messages.push('You can only select three intrests max')
}

multiple checkboxs required to click submit js conditionals

2 Answers2