jQuery | Checkbox List Select / Unselect All with Indeterminate Master Check Example Tutorial

Selection of items with a checkbox is very common user interaction found in many web application. Usually, there is a master checkbox to Check / Uncheck list items with a single click.

In this post we will create an item list with checkboxes and master checkbox, on Checking/ Unchecking will select/ unselect the following list. We will also implement indeterminate state of the checkbox which indicates that some of the items with checks are checked but not all.

Indeterminate checkbox state is available in JavaScript not in HTML. We will create a very simple and quick example of Checkbox list using jQuery’s latest version ( Current version is 3.3.1)

Here to make it quicker we have added Bootstraps CSS library to beautify the UI

Include CDN jQuery (JS) and Bootstrap (CSS) libraries

 

Now add following HTML markup in the index.html demo page

JQuery events on Master Check and Each checkbox in list items.

Three ID’s used as selectors masterCheck, list-wrapper & selected-values  to show selected items in an array

For the indeterminate state of the master checkbox, we have set prop to true/false

There are a method getSelectedItems() which will create an array of the selected items value

See inline comments in the following code.

That’s it, by using the above simple code you can implement a nice select all functionality with the intermediate state on master checkbox using jQuery.

Thanks for visiting :) Let me know if you have some suggestions or feedback for this post in the comment section. Looking for any tutorial or demo on FreakyJolly, just drop me a message here

Leave a Reply

avatar
  Subscribe  
Notify of