title: How do I select all check box when I click on Select button using jQuery
body: <p>I have HTML page which have multiple check boxes and individually they can be checked. I have button <code>select</code>, so what I am suppose to do  is. When I click on select all the check boxes should get selected, and deselected.</p>
  
  <p><strong>Html</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
  &lt;head&gt;
  &lt;script src="jquery.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;script&gt;
  
  $(document).ready(function() {
      $('#selectAll').click(function(event) {  //on click 
          if(this.checked) { // check select status
              $('.btn-chk').each(function() { //loop through each checkbox
                  this.checked = true;  //select all checkboxes with class "checkbox1"               
              });
          }else{
              $('.btn-chk').each(function() { //loop through each checkbox
                  this.checked = false; //deselect all checkboxes with class "checkbox1"                       
              });         
  
          }
      });
      
  });
  &lt;/script&gt;
  
  
  &lt;table id="example" cellspacing="0" width="20%"&gt;
    &lt;thead&gt;
      &lt;tr&gt;
     &lt;th&gt;&lt;button type="button" id="selectAll" class="myClass"&gt;Select&lt;/button&gt;&lt;/th&gt;
    &lt;th&gt;number&lt;/th&gt;
          &lt;th&gt;company&lt;/th&gt;
    &lt;th&gt; Type&lt;/th&gt;
    &lt;th&gt; Address&lt;/th&gt;
    &lt;th&gt;Code&lt;/th&gt;
   &lt;/tr&gt;               
   &lt;/thead&gt;
     
  
  &lt;tbody&gt;          
    &lt;tr&gt;           
      &lt;td&gt;&lt;span class="button-checkbox"&gt;
        &lt;button type="button" class="btn-chk" data-color="success"&gt;&lt;/button&gt;
        &lt;input type="checkbox" class="hidden" /&gt;
         &lt;/span&gt;
    &lt;/td&gt;
    &lt;td&gt;1&lt;/td&gt;
    &lt;td&gt;APPLE&lt;/td&gt;
    &lt;td&gt;IT&lt;/td&gt;
    &lt;td&gt;San Jones&lt;/td&gt;
       &lt;td&gt;US&lt;/td&gt;
    &lt;/tr&gt;
    
    &lt;tr&gt;
    &lt;td&gt;&lt;span class="button-checkbox"&gt;
    &lt;button type="button" class="btn-chk" data-color="success"&gt;&lt;/button&gt;
       &lt;input type="checkbox" class="hidden"  /&gt;
    &lt;/span&gt;
          &lt;/td&gt;
            &lt;td&gt;2&lt;/td&gt;
      &lt;td&gt;DELL&lt;/td&gt;
      &lt;td&gt;IT&lt;/td&gt;
            &lt;td&gt;San Jones&lt;/td&gt;
            &lt;td&gt;US&lt;/td&gt;
        &lt;/tr&gt;
    
        &lt;tr&gt;
          &lt;td&gt;&lt;span class="button-checkbox"&gt;
      &lt;button type="button" class="btn-chk" data-color="success"&gt;&lt;/button&gt;                                                           
      &lt;input type="checkbox" class="hidden"  /&gt;
         &lt;/span&gt;
      &lt;/td&gt;
   &lt;td&gt;3&lt;/td&gt;
   &lt;td&gt;Amazon&lt;/td&gt;
   &lt;td&gt;IT&lt;/td&gt;
   &lt;td&gt;San Jones&lt;/td&gt;
   &lt;td&gt;US&lt;/td&gt;
   &lt;/tr&gt;
    
   &lt;tr&gt;
   &lt;td&gt;&lt;span class="button-checkbox"&gt;
      &lt;button type="button" class="btn-chk" data-color="success"&gt;&lt;/button&gt;
      &lt;input type="checkbox" class="hidden"  /&gt;
      &lt;/span&gt;
   &lt;/td&gt;
   &lt;td&gt;4&lt;/td&gt;
   &lt;td&gt;Microsoft&lt;/td&gt;
   &lt;td&gt;IT&lt;/td&gt;
   &lt;td&gt;San Jones&lt;/td&gt;
   &lt;td&gt;US&lt;/td&gt;
   &lt;/tr&gt;
   &lt;/tbody&gt;
           
  &lt;/body&gt;
  &lt;/html&gt;           
             </code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>Output</strong></p>
  
  <p><img src="https://i.stack.imgur.com/VnIcp.png" alt="enter image description here"></p>
  
  <p>In the image I have select button. what I want is when I click on select button all the check boxes should get selected  </p>