One-Click Checkbox Selection And Deselection - jQuery metalCheckAll

metalCheckAll is a lightweight and straightforward jQuery Check All plugin that allows users to select and deselect a group of checkboxes with just a single click.

Great for selecting/deselecting all items in a list or data table for bulk actions or simplifying form submissions by enabling users to quickly choose or clear multiple options.

How to use it:

1. Download and include the metalCheckAll jQuery plugin on the page.

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/jquery.metalCheckAll.js"></script>

2. Apply the plugin to the master checkbox, which will then control the selection and deselection of all related checkboxes.

<!-- Master Checkbox -->
<input type="checkbox" id="example"> Select All

<!-- Checkbox Groups -->
<div class="group-1">
  <input type="checkbox" name="a">
  <input type="checkbox" name="a">
  <input type="checkbox" name="a">
</div>
<div class="group-2">
  <input type="checkbox" class="b">
  <input type="checkbox" class="b">
  <input type="checkbox" class="b">
</div>
<div class="group-3">
  <input type="checkbox" id="c">
  <input type="checkbox" id="c">
  <input type="checkbox" id="c">
</div>
<div class="group-4">
  <input type="checkbox" data-type="d">
  <input type="checkbox" data-type="d">
  <input type="checkbox" data-type="d">
</div>

$('#example3').metalCheckAll({
  target : ['input[name=a]', '.b', '#c', 'input[data-type="d"]'],
});

3. You can also apply the Check All functionality to an HTML button as follows:

<!-- Check All Button -->
<button id="example2"></button>

<!-- Checkboxes -->
<input type="checkbox" class="example2">
<input type="checkbox" class="example2">
<input type="checkbox" class="example2">

$('#example2').metalCheckAll({
  target : ['.example2'],
  btnValueChecked : 'Click ME',
  btnValueUnChecked : 'UnCheck Me'
});

---

This awesome jQuery plugin is developed by metallurgical. For more Advanced Usages, please check the demo page or visit the official website.