This short tutorial helps you to build simple jQuery script for select or deselect all checkboxes on one click. Our select all checkboxes jQuery script is short and useful. You can use this jQuery script in the HTML form or records list.
Please check the below demo, we have a “Select all” checkbox at the top and all items checkboxes are listed under the “Select all” checkbox. Once the “Select all” checkbox is checked, all checkboxes would be checked. If you uncheck the “Select all” checkbox, all checkboxes would be unchecked.
At first you need to include the jQuery library.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
The “Select all” checkbox have an id #select_all
and items checkboxes have a checkbox
class. When checkbox with #select_all
id is clicked, we will check whether it is checked or not. If #select_all
is checked, loop through each checkbox with class checkbox
and check all the checkboxes. Otherwise uncheck all the checkboxes.
Once each checkbox is clicked, we will check whether all the checkbox was checked or not and #select_all
would be changed accordingly.
<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>
Do you want to get implementation help, or enhance the functionality of this script? Click here to Submit Service Request
Good one
$(‘.checkbox:checked’).length what is the meaning of this line
nice code, easy and working code.
Is this code will work with pagination in listview?
Yes, it will work.
Thanks…..really cool solution
Thank you… ,So What if the checkboxes are in the grid?
Hello, i want to implement this code with codeigniter.
how to use this checkboxes and sent item select checkboxe to email with codeigniter?
Worked like a charm, very helpful indeed.
Thanks.
Finally… After 3 hours I found the code that works for me. Thank you.
thanku so much.. this code is very helpful for me and it save my time
Very nice, thanks. This is perhaps the first jquery code that ran fine on first attempt. Thanks again
Thank You for this great code, I was tried this code it’s working fine.
Very Very Thanks a lot.. Nice work this code
Thank u Dude
Thanks you So Much For Giving This Code and Saving My time
Thank you… For this great code
This a great example and works like a charm. Just one question though. After you have clicked select_all and all the checkboxes are checked as expected. If you uncheck one (or more) of the checkboxes, shouldn’t the select_all checkbox be deselected? How would you do that?
@Nikki
We have updated our code which will fullfill your requirement, please see the JavaScript sections code.