While developing web applications, we usually need to perform CRUD operations. For the list view, we used to have a table with multiple rows. In each row, we keep a checkbox to check/uncheck a specific row. These checkboxes are in use when the user wishes to delete a row from the database. It may also have bulk delete functionality where the parent checkbox is used to select/deselect the child checkboxes.

In this article, we study how to perform select/deselect multiple checkboxes using jQuery.

Our final view is shown in the screenshot below. It shows the parent checkbox in the heading row and each row has its own checkbox.

Selecting the parent checkbox will check all child checkboxes. And when we deselect the parent checkbox, child checkboxes should get unchecked. Having said that let’s see how to apply multiple checkboxes select/deselect using jQuery.

Create Sample Table in Bootstrap

To get started, we need a table with some records along with checkboxes. In the below code, I am creating a dummy table using Bootstrap. I also have added dummy entries in the table.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" />
<div class="container">
    <div class="row">
        <div class="col-xs-12 col-md-8">
            <table class="table">
                <thead>
                    <tr>
                        <th><input type="checkbox" id="selectall"/></th>
                        <th>First Name</th>
                        <th>Last Name</th>
                        <th>Username</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td><input type="checkbox" class="singlechkbox" name="username" value="1"/></td>
                        <td>Mark</td>
                        <td>Otto</td>
                        <td>@mdo</td>
                    </tr>
                    <tr>
                        <td><input type="checkbox" class="singlechkbox" name="username" value="2"/></td>
                        <td>Jacob</td>
                        <td>Thornton</td>
                        <td>@fat</td>
                    </tr>
                    <tr>
                        <td><input type="checkbox" class="singlechkbox" name="username" value="3"/></td>
                        <td>Larry</td>
                        <td>the Bird</td>
                        <td>@twitter</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="col-xs-6 col-md-4"></div>
    </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

If you run the above HTML file on the browser, you will see a table that contains 4 rows. The first row is for heading purposes and the first column is for the checkboxes. Now, we are going to write jQuery code that does actual magic on checkboxes.

jQuery Code which Select/Deselect Multiple Checkboxes

jQuery provides methods and events using which we can achieve our goal. Here I will use click event and prop method to perform our task.

<script type="text/javascript">
jQuery(function($) {
    $('body').on('click', '#selectall', function() {
        $('.singlechkbox').prop('checked', this.checked);
    });
 
    $('body').on('click', '.singlechkbox', function() {
        if($('.singlechkbox').length == $('.singlechkbox:checked').length) {
            $('#selectall').prop('checked', true);
        } else {
            $("#selectall").prop('checked', false);
        }
 
    });
});
</script>

The above code checks if the parent checkbox is checked. If it is, then it checks all the checkboxes. When you uncheck the parent checkbox, it also unchecks all child checkboxes.

I hope you understand how to select/deselect checkboxes using jQuery. I would like to hear your thoughts in the comment section below.

Related Articles

• Upload, Crop and Resize Image Using jQuery and PHP
• Add Zoom Image Effect on Your Website Images
• How to Implement jQuery Datepicker with Timepicker

If you liked this article, then please subscribe to our YouTube Channel for video tutorials.