Limit Checkbox Selection in JavaScript Using the forEach Method

Question

I'm working on a checklist app which requires a maximum of (3) check fields to be selected by the user. I want to block off any more than (3) selections. I've created a function to do this which is reading that an item has been checked, however the function doesn't block off the users ability to check more than 3 checkboxes.

const checks = document.querySelectorAll(".item-list");
let max = 3

checks.forEach(function (check) {
    check.addEventListener('change', function () {
        if (check.length > max) {
              return false
        }
    })
});

<div class="form">
        <p> <u> Please Select the Items Below. (A Maximum of (3) can be selected) </u> </p>
        <br>
                <div class="specializations-list">
                        
                        <div class="list-items">
<input 
class="item-list" 
type="checkbox"
value ="Item-1">Item 1
                        <br>
                       
<input 
class="item-list"
type="checkbox" 
value="Item-2">Item 2
                        <br>   
 
<input 
class="item-list"
type="checkbox" 
value="Item-3" >Item 3

                        <br>   
 
<input 
class="item-list"
type="checkbox" 
value="Item-4" >Item 4

                        <br>   
 
<input 
class="item-list"
type="checkbox" 
value="Item-5" >Item 5

                        <br>   
 
<input 
class="item-list"
type="checkbox" 
value="Item-6" >Item 6

                        <br>   
 
<input 
class="item-list"
type="checkbox" 
value="Item-7" >Item 7
                        </div>

Spectric · Accepted Answer · 2021-06-18 13:41:03Z

2

Something like this could work, might need some rework

var checks = document.querySelectorAll(".check");
var max = 3;
for (var i = 0; i < checks.length; i++)
  checks[i].onclick = selectiveCheck;

function selectiveCheck(event) {
  var checkedChecks = document.querySelectorAll(".check:checked");
  if (checkedChecks.length >= max + 1)
    return false;
}

<label><input type="checkbox" class="check" /> Checkbox 1</label>
<label><input type="checkbox" class="check" /> Checkbox 2</label>
<label><input type="checkbox" class="check" /> Checkbox 3</label>
<label><input type="checkbox" class="check" /> Checkbox 4</label>
<label><input type="checkbox" class="check" /> Checkbox 5</label>

edited Jun 18, 2021 at 13:41

Spectric

32.6k6 gold badges32 silver badges56 bronze badges

answered Jun 18, 2021 at 13:29

Kronan

3011 silver badge10 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Professor Abronsius · Accepted Answer · 2021-06-18 13:48:09Z

You could use querySelectorAll in conjunction with the :checked flag to obtain a nodelist of all checked checkboxes and from that query the length directly - if the length exceeds your predefined limit then warn the user and prevent further actions.

I quickly added a span element with timed message to indicate to the user what is occurring.

const iMax=3;

document.querySelectorAll('.item-list').forEach( chk=>{
    chk.addEventListener('click',function(e){
        if( document.querySelectorAll('.item-list:checked').length > iMax ){
            e.preventDefault();
            let span=this.parentNode.nextElementSibling;
            span.textContent=`A maximum of ${iMax} can be selected`;
            setTimeout(()=>span.textContent='', 2500 );
            return false;
        }
    });
})

<div class="form">
<p> <u> Please Select the Items Below. (A Maximum of (3) can be selected) </u> </p>
<br>
<div class="specializations-list">
<div class="list-items">
   <input 
      class="item-list" 
      type="checkbox"
      value ="Item-1">Item 1
   <br>
   <input 
      class="item-list"
      type="checkbox" 
      value="Item-2">Item 2
   <br>   
   <input 
      class="item-list"
      type="checkbox" 
      value="Item-3" >Item 3
   <br>   
   <input 
      class="item-list"
      type="checkbox" 
      value="Item-4" >Item 4
   <br>   
   <input 
      class="item-list"
      type="checkbox" 
      value="Item-5" >Item 5
   <br>   
   <input 
      class="item-list"
      type="checkbox" 
      value="Item-6" >Item 6
   <br>   
   <input 
      class="item-list"
      type="checkbox" 
      value="Item-7" >Item 7
</div>
<span></span>

Collectives™ on Stack Overflow

Limit Checkbox Selection in JavaScript Using the forEach Method

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related