jQuery Plugin To Select/Deselect All Checkboxes In A Group - selectall

File Size: 17.3 KB
Views Total: 1304
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
jQuery Plugin To Select/Deselect All Checkboxes In A Group - selectall

Just another jQuery 'Check All' plugin which enables selection / deselection of all checkboxes in a checkbox group.

How to use it:

1. Download the plugin and then place the main JavaScript file after you've loaded the latest version of jQuery library (Slim build is recommended).

<script src="//code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="jquery.selectall.min.js"></script>

2. Make sure all the checkboxes are wrapped in a same fieldset as follow:

<fieldset>
  <legend>Privacy Communication</legend>

  <label for="Hushmail">
    <input id="Hushmail" type="checkbox" value="1">
    Hushmail
  </label>

  <label for="Protonmail">
    <input id="Protonmail" type="checkbox" value="5">
    Protonmail (free)
  </label>

  <label for="Bitmessage">
    <input id="Bitmessage" type="checkbox" value="5">
    Bitmessage (free)
  </label>

</fieldset>

3. Calling the function on the fieldset element will automatically generate 'select all' and 'deselect all' buttons inside the checkbox group.

$("fieldset").selectAll();

4. Customize the 'select all' and 'deselect all' buttons with the following options.

$("fieldset").selectAll({
  buttonParent: "legend",
  buttonWrapperHTML: "",

  buttonSelectText: "Select All",
  buttonSelectBeforeHTML: "",
  buttonSelectAfterHTML: "",

  buttonDeSelectText: "Deselect All1",
  buttonDeSelectBeforeHTML: "",
  buttonDeSelectAfterHTML: "",

  buttonExtraClasses: "btn btn-default"
});

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