No description, website, or topics provided.
JavaScript HTML CSS
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.

Indeterminate Checkboxes

You can view the demo for this repo at

For a working demo which served as the source of this repo, see

For a swell tutorial, see

When I went to the original tutorial, I couldn't just copy and paste the provided code into my existing app and have it work (because I was also running with a collapsible checkbox system and thus had a very messy markup schema)... This codebase uses a really complicated recursion project (from the perspective of a backend ruby dev) so I finally refactored the source tutorial code, and was then able to drop it into my web app.
Bottom line, I'm sharing the cleaned up code (it's in a ruby-javascript dialect) so other's can re-use it with out spending too much time deciphering it and making adaptations.


To use this code, set the class of all your checkboxes to be 'indeterminate-checkbox'.

The default html markup scheme goes like this:


Notice that going from input up to li, it's just 1 step?
That is defined as the variable at the top of the file stepsFromCheckboxToContainer.
The stepsFromContainerToParentContainer refers to the distance from the deepest li to the next up li, 2 steps in this default scenario.

Here are the default configuration settings:

// Configs:
var selectorForCheckboxes = 'input[type="checkbox"].indeterminate-checkbox',
    stepsFromCheckboxToContainer = 1,
    stepsFromContainerToParentContainer = 2;


Simply call IndeterminateCheckbox.init() on a page you wish to have indeterminate, tree style checkboxes on.


This work was adapted from Chris Coyier. You can see his license which applies to the revisions made to his code.