Multiple Checkbox Select/Deselect Using jQuery

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 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 as shown in the screenshot below. It shows the parent checkbox in the heading row and each row has its own checkbox.

Checkbox Select Deselect Using jQuery

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 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 which 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 which 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 of 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 do select/deselect checkboxes using jQuery. I would like to hear your thoughts in the comment section below.

Related Articles

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

2 thoughts on “Multiple Checkbox Select/Deselect Using jQuery

    1. My intention with the image was just shown an example picture of a checkbox in the table. Thanks for pointing out this can be misleading. I updated image which generated from the code in this article.

Leave a Reply

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