title: Limit Checkbox Selection in JavaScript Using the forEach Method
body: <p>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.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const checks = document.querySelectorAll(".item-list");
  let max = 3
  
  checks.forEach(function (check) {
      check.addEventListener('change', function () {
          if (check.length &gt; max) {
                return false
          }
      })
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="form"&gt;
          &lt;p&gt; &lt;u&gt; Please Select the Items Below. (A Maximum of (3) can be selected) &lt;/u&gt; &lt;/p&gt;
          &lt;br&gt;
                  &lt;div class="specializations-list"&gt;
                          
                          &lt;div class="list-items"&gt;
  &lt;input 
  class="item-list" 
  type="checkbox"
  value ="Item-1"&gt;Item 1
                          &lt;br&gt;
                         
  &lt;input 
  class="item-list"
  type="checkbox" 
  value="Item-2"&gt;Item 2
                          &lt;br&gt;   
   
  &lt;input 
  class="item-list"
  type="checkbox" 
  value="Item-3" &gt;Item 3
  
                          &lt;br&gt;   
   
  &lt;input 
  class="item-list"
  type="checkbox" 
  value="Item-4" &gt;Item 4
  
                          &lt;br&gt;   
   
  &lt;input 
  class="item-list"
  type="checkbox" 
  value="Item-5" &gt;Item 5
  
                          &lt;br&gt;   
   
  &lt;input 
  class="item-list"
  type="checkbox" 
  value="Item-6" &gt;Item 6
  
                          &lt;br&gt;   
   
  &lt;input 
  class="item-list"
  type="checkbox" 
  value="Item-7" &gt;Item 7
                          &lt;/div&gt;   </code></pre>
  </div>
  </div>
  </p>