Check and Uncheck all Checkbox using jQuery

Checkboxes are the best way to get single or multiple options from user. You often see some sites where you are able to check and uncheck all checkboxes. Just like in the wordpress admin where you can select or deselect wordpress post title and perform bulk actions like edit and move to trash.

So in this post I am going to show you how to check and uncheck all checkbox using jquery.

Check and Uncheck Checkbox using jQuery:

I will create a list of 5 fruits with checkboxes. You can check or uncheck any of them. On the top of fruits I will create another checkbox having Check All title. When you click on check all then fruits checkbox will either checked or unchecked depends on the behaviour of Check All.

So lets start with writing HTML.

Checkbox HTML:


<div class="check-all-container">
	<span> <input type="checkbox" name="check_all" id="checkAll">Check All</span>
</div>

<div class="checkboxes-container">
	<input type="checkbox" name="fruits_checkbox" class="fruit-checkboxes">Apple <br/>
	<input type="checkbox" name="fruits_checkbox" class="fruit-checkboxes">Banana <br/>
	<input type="checkbox" name="fruits_checkbox" class="fruit-checkboxes">Mango <br/>
	<input type="checkbox" name="fruits_checkbox" class="fruit-checkboxes">Orange <br/>
	<input type="checkbox" name="fruits_checkbox" class="fruit-checkboxes">Pineapple <br/>
	
</div>

<span> <input type="checkbox" name="check_all" id="checkAll">Check All</span>

</div>

<input type="checkbox" name="fruits_checkbox" class="fruit-checkboxes">Apple <br/>

<input type="checkbox" name="fruits_checkbox" class="fruit-checkboxes">Banana <br/>

<input type="checkbox" name="fruits_checkbox" class="fruit-checkboxes">Mango <br/>

<input type="checkbox" name="fruits_checkbox" class="fruit-checkboxes">Orange <br/>

<input type="checkbox" name="fruits_checkbox" class="fruit-checkboxes">Pineapple <br/>

</div>

jQuery Code:

First of all I will add jquery link.


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

In jquery code fruits checkbox will check or uncheck when user will click on Check All. If Check All checkbox is checked then fruits checkbox will check and if Check All is uncheck then fruits checkbox will uncheck.


<script>
$(document).ready(function(){
	$("#checkAll").click(function(){
		
		if($(this).is(':checked'))
		{
			$('.fruit-checkboxes').each(function() { 
				this.checked = true; 
			});
		}	
		else
		{
			
			$('.fruit-checkboxes').each(function() { 
				this.checked = false; 
			});
			
		}
		
	});
});

</script>