Select / Deselect all checkboxes using jQuery

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>
READ  How to create and run Cron job in PHP