jQuery Check All Checkboxes

In this tutorial we will see how to Check All Checkboxes with jQuery. The jQuery prop() Method can be used for this purpose which will change the state of all checkboxes from unchecked to checked.

Table of Contents

• HTML Code
• JQuery Code
• jQuery prop() Method
• Demo
• Video Tutorial
• More JQuery Tutorials

HTML Code

HTML Code is given below, This code contains four checkboxes and a button tag to check all of them.

<input type="checkbox" >
<input type="checkbox" >    
<input type="checkbox" >    
<input type="checkbox" >    
<button id='btn'>Check All</button> 

JQuery Code

JQuery Code is given below, In this code jQuery prop() Method is used to check all checkboxes present on the webpage or document.

This is done on click event, click event is attached with the HTML button using jQuery click() method.

Take a look at the code given below.

<script>
$(document).ready(function(){  
  $('#btn').click(function(){   
    $('input[type="checkbox"]').prop('checked', true);  
 
  });       
});
</script>

jQuery prop() Method

jQuery prop() Method is used to set or get the properties and values of HTML elements.

In this code it is used to set the 'checked' value of all checkboxes to 'true', this will check all checkboxes.

Demo

Check Demo

Video Tutorial

Watch video tutorial on how to Check All Checkboxes with jQuery.