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