How to check / uncheck all check boxes using jQuery?

You may have noticed select/deselect all functionality on websites like gmail.com, outlook.com or even in the wordpress admin dashboard basically which allows you to select all emails or posts on the page with single click. Which can be convenient to have check / uncheck multiple checkboxes with single click especially if the list is vast.

Here is the code snippet:

HTML:

 Selecct All
View Post
List Posts
Delete Posts
Create Posts
Users list
Delete Users
Add users
create Permission
List permission
Edit permission
Delete permission

JQuery:

$(document).ready(function() {
    $('#selecctall').click(function(event) { 
        if(this.checked) { // check select status
            $('.permission').each(function() { 
                this.checked = true;  //select all 
            });
        }else{
            $('.permission').each(function() { 
                this.checked = false; //deselect all             
            });        
        }
    });
   
});

What happens in this code is when user clicks “Select All” checkbox, the code first checks the status of checkbox with id “selecctall”, and loops thought each checkbox with class ‘permission’ and applies “selecctall” checkbox status to all other checkboxes.

That is it. I hope you find this post useful. If you have questions or want to share your own advice, leave a comment!