How to select/deselect all checkboxes using Javascript

If there is a long list of check boxes in a form, it becomes very hectic to check each individually and it also looks very wired.

In this article, you will learn how to manage check boxes selection using javascript. For this, we have created three sections using HTML and kept some elements with checkbox in each section. There is a checkbox 'Select All' with each section heading.

How to select/deselect all checkboxes using Javascript

When the user clicks on the 'Select All' checkbox, the all elements under that section will get checked. This checkbox toggles the other checkboxes.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>How to select/deselect all checkboxes using Javascript </title>
    <style type="text/css">
            .bg_head { background-color: #003366; color: #fff;}
            .bg_element {  background-color: #99CC99;}
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <script type="text/javascript">
            function checkAllInCategory($b){ 
                var b = $b;
                var chkelement = 'checkdata_'+b;
                var chscl =  'ele_'+b;
                var elements = document.getElementsByClassName(chscl); 
                $selectallsch       = document.getElementById(chkelement).checked;  
                for(var i=0;i<elements.length;i++){ 
                    if($selectallsch == true ) {  
                        elements[i].checked = true
                    }
                    if($selectallsch == false ) { 
                        elements[i].checked = false
                    }
                }
            }
      </script>
  </head>
  <body>
    <table cellpadding="3" border="1">
    <?php 
        $data = array('Flowers'=>array('Rose', 'Lily', 'Sunflower'), 
                      'Animals'=>array('Cat', 'Dog', 'Rat'), 
                      'City'=>array('Delhi', 'Pune', 'Mumbai'));
       foreach($data as $key=>$category) {
    ?>
    <tr class="bg_head">
     <td><b><?php echo ucfirst($key); ?></b></td>
     <td>
     <input type="checkbox" id="checkdata_<?php echo $key; ?>" onclick="checkAllInCategory('<?php echo $key; ?>')" />
     </td>
    </tr>
    <?php
      foreach($category  as $element){
        echo '<tr class="bg_element"><td><b>'.$element.'</b></td><td>';
    ?>
    <input type="checkbox" name="<?php echo $key; ?>[]" class="ele_<?php echo $key; ?>" value="<?php echo $element; ?>" />
    <?php
       echo '</td></tr>';
      }
    } 
    ?>
    </table>
  </body>
</html>