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.

jquery check and uncheck checkbox

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:

jQuery Code:

First of all I will add jquery link.

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.

Also read:

 

Author: Ahsan Zameer

I am a web developer and love to search new stuff on web. Trying different approaches and ideas to make web developing more interesting and enjoyable.