Select / Deselect All Checkboxes using jQuery

The Select All feature is very useful where checkboxes are provided in the user interface to select all items at once. It helps the user to check or uncheck all checkboxes at once by using the Select All element. The Select All Checkboxes functionality can be implemented easily with jQuery. You can also use pure JavaScript to implement Select All functionality without using jQuery.

You can build a simple jQuery script to check or uncheck all checkboxes on a single click. This select all checkboxes code snippet is very useful for the element list in the webpage. In this tutorial, we will show you how to select or deselect all checkboxes on one click using jQuery.

In this example, we will create a list of multiple checkboxes with a Select All checkbox. When the Select All checkbox is checked or unchecked, it makes the other checkboxes selected or deselected.

Checkbox Elements with HTML

First, define some elements with checkboxes and Select All checkboxes in HTML.

• Once the Select All checkbox is checked, all other checkboxes should be selected.
• If the Select All checkbox is unchecked, all other checkboxes should be deselected.

<ul>
    <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 Checkboxes using jQuery

In this method, we will implement Select All checkbox functionality using jQuery.

Include the jQuery library:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

The Select All checkbox has an id select_all and other checkboxes have a class checkbox. When the checkbox with the select_all ID is clicked, we will check whether it is checked or not. If select_all is checked, loop through each checkbox with the class checkbox and check all the other checkboxes. Otherwise, uncheck all the other checkboxes.

• When each checkbox of the items is clicked, we will check whether all the other checkboxes were checked or not, and #select_all will be changed accordingly.

<script>
$(document).ready(function(){
    // Select all checkboxes
    $('#select_all').on('click', function(){
        let chk_status = this.checked;

        // Iterate all listed checkbox items
        $('.checkbox').each(function(){
            this.checked = chk_status;
        });
    });
    
    // Check or uncheck "select all", if one of the listed checkbox items is checked/unchecked
    $('.checkbox').on('click', function(){
        if($('.checkbox:checked').length == $('.checkbox').length){
            $('#select_all').prop('checked', true);
        }else{
            $('#select_all').prop('checked', false);
        }
    });
});
</script>

Select All Checkboxes using JavaScript

In this method, we will implement Select All checkbox functionality using JavaScript.

Here is the pure JavaScript code to select or deselect all checkboxes at once:

• Select the “Select All” checkbox by ID (select_all) using the getElementById() method.
• Select the listed checkbox items by class (.checkbox) using the querySelectorAll() method.
• On the “Select All” change event, iterate all the listed checkboxes using the forEach() method and check or uncheck them accordingly.
• Iterate all listed checkbox items and check or uncheck “select all”, if one of the listed checkbox items is checked/unchecked.

<script>
let select_all = document.getElementById('select_all');
let checkboxes = document.querySelectorAll('.checkbox');

// Select all checkboxes
select_all.addEventListener('change', function () {
    checkboxes.forEach(function (checkbox) {
        checkbox.checked = this.checked;
    }, this);
});

// Iterate all listed checkbox items
// Check or uncheck "select all", if one of the listed checkbox items is checked/unchecked
checkboxes.forEach(function (checkbox) {
    checkbox.checked = this.checked;

    checkbox.addEventListener('change', function () {
        if(this.checked == false){
            select_all.checked = false;
        }

        if(document.querySelectorAll('.checkbox:checked').length == checkboxes.length){
            select_all.checked = true;
        }
    });
}, this);
</script>