Select / Deselect all checkboxes using jQuery
In this tutorial, I explain how to select and deselect multiple check box using jquery.
First, you have to include a jQuery Library
|
1 |
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> |
HTML Code for Checkboxes
|
1 2 3 4 5 6 7 8 9 10 |
<ul class="main"> <li><input type="checkbox" id="select_all" /> Select all</li> <ul> <li><input type="checkbox" class="checkbox" value="1"/>Item 1</li> <li><input type="checkbox" class="checkbox" value="2"/>Item 2</li> <li><input type="checkbox" class="checkbox" value="3"/>Item 3</li> <li><input type="checkbox" class="checkbox" value="4"/>Item 4</li> <li><input type="checkbox" class="checkbox" value="5"/>Item 5</li> </ul> </ul> |
#select_all is the id for checkbox and items checkboxes have a checkbox class.
Jquery Script
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<script type="text/javascript"> $(document).ready(function(){ $('#select_all').on('click',function(){ if(this.checked){ $('.checkbox').each(function(){ this.checked = true; }); }else{ $('.checkbox').each(function(){ this.checked = false; }); } }); $('.checkbox').on('click',function(){ if($('.checkbox:checked').length == $('.checkbox').length){ $('#select_all').prop('checked',true); }else{ $('#select_all').prop('checked',false); } }); }); </script> |
Demo
- Select all
- Item 1
- Item 2
- Item 3
- Item 4
- Item 5
Here is the full code that we have written during this tutorial:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script><script type="text/javascript"> $(document).ready(function(){ $('#select_all').on('click',function(){ if(this.checked){ $('.checkbox').each(function(){ this.checked = true; }); }else{ $('.checkbox').each(function(){ this.checked = false; }); } }); $('.checkbox').on('click',function(){ if($('.checkbox:checked').length == $('.checkbox').length){ $('#select_all').prop('checked',true); }else{ $('#select_all').prop('checked',false); } }); }); </script> <ul class="main"> <li><input type="checkbox" id="select_all" /> Select all</li> <ul> <li><input type="checkbox" class="checkbox" value="1"/>Item 1</li> <li><input type="checkbox" class="checkbox" value="2"/>Item 2</li> <li><input type="checkbox" class="checkbox" value="3"/>Item 3</li> <li><input type="checkbox" class="checkbox" value="4"/>Item 4</li> <li><input type="checkbox" class="checkbox" value="5"/>Item 5</li> </ul> </ul> |
