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

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>