Select / Deselect all checkboxes using jQuery

Share on FacebookTweet about this on TwitterShare on Google+Share on LinkedInPin on PinterestPrint this pageEmail this to someone

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.

  •  Select all
    • Item 1
    • Item 2
    • Item 3
    • Item 4
    • Item 5

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 

1
#select_all

 and items checkboxes have a 

1
checkbox

 class. When checkbox with 

1
#select_all

 id is clicked, we will check whether it is checked or not. If 

1
#select_all

 is checked, loop through each checkbox with class 

1
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 

1
#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>

The HTML would be the following:

<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>
Share on FacebookTweet about this on TwitterShare on Google+Share on LinkedInPin on PinterestPrint this pageEmail this to someone
READ  Back to Top Button using jQuery and CSS

Leave a Reply

Your email address will not be published. Required fields are marked *