Check/uncheck all checkboxes by jQuery: SelectAllCheckbox

What is SelectAllCheckbox plug-in?

The SelectAllCheckbox is a jQuery based plug-in that can be used for allowing visitors to check or uncheck all option at one go.

If the group of checkbox contains disabled checkbox(es) then its state will not be changed. You may add as many checkboxes as you require in the group as using this plug-in.

Demo
Developer’s page Download plug-in

How to set up SelectAllCheckbox plug-in on your website?

Include the reference to the JS file of the plug-in after jQuery:

 <script type=”text/javascript” src=”http://code.jquery.com/jquery-1.12.1.min.js”></script>

<script type=”text/javascript” src=”js/selectallcheckbox/jquery.selectallcheckbox.js”></script>

Initiate the plug-in via jQuery:

 

The markup can be seen in the demo below.

A demo of select all/none checkboxes

In this demo, three groups of checkboxes are created with select all/none checkbox with each. If you press “Select All”, the status is shown towards the right side.

jQuery checkbox select all

See online demo and code

The markup of the first group:

The jQuery code for this group:

 

You can see, you have to use the same name for a group of checkboxes. The name is referred in the script part along with the ID of the checkbox with Select All option.

Get the complete code from the demo page’s code section.

You may read more about this simple and handy plug-in by visiting the developer’s page that contains properties and configuration options.