Select All Checkboxes With A Single Checkbox - jQuery checkboxAll
File Size: | 5.47 KB |
---|---|
Views Total: | 13478 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
Just another jQuery Check All plugin which enables a 'Master' checkbox to select/unselect all the related (children) checkbox inputs with just one click.
How to use it:
1. Add the all
CSS class to the first checkbox as these:
<div class="example"> <div> <input type="checkbox" name="selectall-demo" id="selectall1" class="all" value="1"> <label for="selectall1">Select all</label> </div> <div> <input type="checkbox" name="check[]" id="check1" value="1"> <label for="check1">1. checkbox</label> </div> <div> <input type="checkbox" name="check[]" id="check2" value="2"> <label for="check2">2. checkbox</label> </div> <div> <input type="checkbox" name="check[]" id="check3" value="3"> <label for="check3">3. checkbox</label> </div> <div> <input type="checkbox" name="check[]" id="check4" value="4"> <label for="check4">4. checkbox</label> </div> </div>
2. Download the jQuery checkboxAll plugin and insert the JavaScript file jquery.checkboxall.min.js
after jQuery.
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"> </script> <script src="jquery.checkboxall-1.0.min.js"></script>
3. Call the function on the parent container and done.
$(document).ready(function() { $('.example').checkboxall(); })
This awesome jQuery plugin is developed by bracsok3. For more Advanced Usages, please check the demo page or visit the official website.