jQuery Uncheck All Checkboxes

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

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 uncheck all of them.

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

JQuery Code

JQuery Code is given below, In this code jQuery prop() Method is used to uncheck 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", false);
});

});
</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 false, this will uncheck all of them.

Demo

Check Demo

Video Tutorial

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