JavaScript Check All Checkboxes

This JavaScript code snippet provides a simple solution to check or uncheck checkboxes within a specific group. It allows you to easily manage a set of checkboxes by using designated trigger elements and checkable checkboxes. The trigger elements should have the attribute data-checkall-trigger with the corresponding group name, while the checkboxes to be checked or unchecked should have the attribute data-checkall-group with the same group name.

How to Create JavaScript Check All Checkboxes

1. Create an unordered list (ul) with the class “checkall” to hold the checkboxes. Inside the list, add list items (li) with labels and checkboxes. Each checkbox should have the attribute data-checkall-trigger with a unique group name assigned to it. Here’s an example:

<ul class="checkall">
  <li><label><input type="checkbox" data-checkall-trigger="group1"> Check all 1</label></li>
  <li><label><input type="checkbox" data-checkall-trigger="group2"> Check all 2</label></li>
  <li><label><input type="checkbox" data-checkall-trigger="group3"> Check all 3</label></li>
</ul>

2. Apply the following CSS styles to enhance the appearance of the checkboxes:

body {
  font-family: Arial;
  background: #111;
}
.cd__main{
display: block !important;
}
ul {
  list-style: none;
  margin: 0 20px;
  padding: 0;
  float: left;
}

li {
  background-color: #eee;
  padding: 10px 10px;
  margin-bottom: 10px;
  width: 200px;
}

label {
  display: block;
  cursor: pointer;
}

.checkall {
  float: none;
  display: block;
  overflow: hidden;
}

.checkall li {
  float: left;
  background-color: hotpink;
  margin-right: 40px;
}

3. Add the provided JavaScript function to your code. This function enables the check-all functionality. It iterates over the triggers and attaches a change event listener to each of them. When a trigger’s state changes, the associated checkbox group is determined using the data-checkall-trigger attribute. The function toggleCheckboxGroup is then called to check or uncheck all the checkboxes in the group based on the state of the trigger.

/**
 * Simple snippet to check/uncheck checkboxes of a specific group
 * The check trigger needs a data-checkall-trigger="groupname"
 * The checkable checkboxes need a data-checkall-group="groupname"
 */

Finally, add the following JavaScript function for the checkboxes:
(function(){
  // Get all triggers
  const checkAll = document.querySelectorAll('[data-checkall-trigger]');
  
  // Check / Uncheck all matching checkboxes
  function toggleCheckboxGroup (checked, checkboxGroup) {
    let matchingCheckboxes = document.querySelectorAll('[data-checkall-group="'+ checkboxGroup +'"]');
    matchingCheckboxes.forEach(function(el){
      if (checked !== el.checked) {
        el.checked = !el.checked; 
      }
    });
  };
  
  // Get all checkboxes of a group
  checkAll.forEach(function(el){
    el.addEventListener('change', function(){
      let checkboxGroup = el.dataset.checkallTrigger;
      let checked = el.checked ? true : false;
      toggleCheckboxGroup(checked, checkboxGroup); 
    });
  });
})();

That’s all! hopefully, you have successfully created Checkboxes. If you have any questions or suggestions, feel free to comment below.