Dojo TriStateCheckBox

The TriStateCheckBox is a relatively new addition to Dojo.  It is available in version 1.7.3 and above.  Currently it is in the dojox module.  Because it is yet to be in the standard dojo / dijit modules its style sheet is not in the standard css either.  To make it work you need to include its style sheet separately.

Links

Here are some links to the TriStateCheckBox test pages,

Latest Tests: http://archive.dojotoolkit.org/nightly/dojotoolkit/dojox/form/tests/test_TriStateCheckbox.html

Tests for version 1.7.3: http://download.dojotoolkit.org/release-1.7.3/dojo-release-1.7.3/dojox/form/tests/test_TriStateCheckbox.html

Setup

The stylesheet is required separately, such as,

    <link rel="stylesheet" type="text/css" href="http://<dojo_provider>/dojo/1.8.0/dojox/form/resources/TriStateCheckBox.css" />

Obviously you have to use a dojo provider or host the dojo css and js locally.

The require function on the page needs to have "dojox/form/TriStateCheckBox" as part of it.

    <input id="tscb" data-dojo-type="dojox.form.TriStateCheckBox" data-dojo-props='checked:true'/>

This will create a checkbox which is initially checked.

Interaction

The default checkbox has three states for the 'checked' variable.  These are true, false, and mixed.  The checkbox above is defined as checked initially.  To get or set the state just use

    registry.byId('tsch').get('checked')

    registry.byId('tsch').set('checked', 'mixed')

where the registry is the dijit registry (see http://awhite.blogspot.co.uk/2012/09/dojo-dijit-dojox-tips.html)

Mixed -> Checked

When clicking on the TriStateCheckBox in the mixed state it goes to the unchecked state by default.  If this isn't what you want you can force it to go to a checked state using the states 'cycle'.

data-dojo-props='states:["mixed", true, false]'