Select All Checkboxes With A Single Checkbox - jQuery checkboxAll
| File Size: | 5.47 KB |
|---|---|
| Views Total: | 13578 |
| 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.











