Full Stack LAMP - MEAN Developer, Python developer. Certified Azure Developer. Freelance programmer/consultant/trainer.

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!

Leave a Reply