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
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
Video Tutorial
Watch video tutorial on how to Check All Checkboxes with jQuery.