How to Select or unSelect All Check Boxes with jQuery

In this tutorial i am writing about another time saving jQuery Plugin which enables a User to Select / Deselect All Check Boxes in a given list. This plugin is useful in scenarios where your selection contains too many Check Boxes and you want to select all the fields or majority of the fields in a single click. It also helps to Deselect all Check Box Fields when you click on it again, after Selecting all Fields.

 

How to Select or Deselect All Items With jQuery

Usage:


Using this plugin is simple. You will be shown a CheckBox mentioning Select All. By clicking it, all of your CheckBox Options will be Selected or DeSelected. Following is the HTML Code for specifying parameters to be added in your code for making it to work:

HTML:

Above is a list of Check Box Items, each item is selectable by Clicking On Its Checkbox. There is a Checkbox Select All, which will Select All Checboxes upon clicking on it, or it will DeSelect All Checkboxes upon clicking again.

Now lets move towards the Javascript / jQuery portion.

jQuery:

Include the following code anywhere in your page. Best is to put it in the footer of your page.

This code depends on jQuery, so we must include jQuery library in our page for making it to work. The above code will first Check the Status Of All Check Boxes, and will Select or DeSelect them depending on their status. Means if all check boxes have the status: Selected, then this code will unselect them and vice versa.

That’s it. Hope you like this tiny tutorial. See the demo, or download the script files below.

How To Select Or Deselect All Check Boxes With JQuery
How To Select Or Deselect All Check Boxes With JQuery
How To Select or Deselect all Check Boxes with jQuery.zip
659.0 B
2 Downloads
Details

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

scroll to top