Checkbox Example (Mixed State)

This example implements the Checkbox Design Pattern using div element for a mixed state checkbox used in conjunction with a set of standard HTML checkboxes. This example also uses fieldset/Legend elements to provide a grouping label for the checkboxes since the checkboxes are related to each other.

Similar examples include:

Checkbox (Two State): Simple two state checkbox.

Example

Sandwich Condiments

All condiments

Lettuce
Tomato
Mustard
Sprouts

Keyboard Support

Key	Function
`Tab`	Moves keyboard focus to the checkbox.
`Space`, or `Enter`	Toggle the checkbox between unchecked, mixed and checked. When the checkbox is unchecked, all the controlled checkboxes will be unchecked. When the checkbox is mixed, all the controlled checkboxes will return to the last state the user selected for that particular checkbox or the default state when the page was loaded. When the checkbox is checked, all the controlled checkboxes will be checked.

Key

Function

Tab

Moves keyboard focus to the checkbox.

Space,
or Enter

Toggle the checkbox between unchecked, mixed and checked.
When the checkbox is unchecked, all the controlled checkboxes will be unchecked.
When the checkbox is mixed, all the controlled checkboxes will return to the last state the user selected for that particular checkbox or the default state when the page was loaded.
When the checkbox is checked, all the controlled checkboxes will be checked.

Role, Property, State, and Tabindex Attributes

Role	Attribute	Element	Usage
`checkbox`		`div`	The `role="checkbox"` attribute identifies the `div` element as a ARIA `checkbox`. The accessible name comes the child text content of the `div[role="checkbox"]` element. The `checkbox` widget needs a `tabindex="0"` value.
	`tabindex="0"`	`div`	The `div["checkbox"]` is identified as an interactive element and is added to the tab order of the page by setting the `tabindex="0"`.
	`aria-controls="[IDREFS]"`	`div`	A list of `IDREF`s identifies which checkboxes are controlled by the mixed checkbox.
	`aria-checked="false"`	`div`	Indentifies the `checkbox` button as not unchecked. This state reflects that all the controlled checkboxes are unchecked. CSS attribute selectors (e.g. `[aria-checked="false"]`) are used to synchronize the visual states with the value of the `aria-checked` attribute. The CSS `:before` psuedo selector and the `content` property are used to indcate visual state of "unchecked" to support high contrast setting in operating systems and browsers.
	`aria-checked="true"`	`div`	Indentifies the `checkbox` as checked. This state reflects that all the controlled checkboxes are checked. CSS attribute selectors (e.g. `[aria-checked="true"]`) are used to synchronize the visual states with the value of the `aria-checked` attribute. The CSS `:before` psuedo selector and the `content` property are used to indcate visual state of "checked" to support high contrast setting in operating systems and browsers.
	`aria-checked="mixed"`	`div`	Indentifies the `checkbox` as mixed. This state reflects that some of controlled checkboxes are all checked and some are not checked. CSS attribute selectors (e.g. `[aria-checked="mixed"]`) are used to synchronize the visual states with the value of the `aria-checked` attribute. The CSS `:before` psuedo selector and the `content` property are used to indcate visual state of "mixed" to support high contrast setting in operating systems and browsers.

Javascript and CSS Source Code

HTML Source Code

<div id="ex1">
  <fieldset>
    <legend>
      Sandwich Condiments
    </legend>
    <div role="checkbox"
       class="group_checkbox"
       aria-checked="mixed"
       aria-controls="cond1 cond2 cond3 cond4"
       tabindex="0">
      
                    All condiments
                
    </div>
    <ul class="checkboxes">
      <li>
        <label>
          <input type="checkbox" id="cond1">
          Lettuce
        </label>
      </li>
      <li>
        <label>
          <input type="checkbox"
               id="cond2"
               checked="">
          Tomato
        </label>
      </li>
      <li>
        <label>
          <input type="checkbox" id="cond3">
          Mustard
        </label>
      </li>
      <li>
        <label>
          <input type="checkbox" id="cond4">
          Sprouts
        </label>
      </li>
    </ul>
  </fieldset>
  <script type="text/javascript">
    

            function checkboxFocus(event) {
              event.currentTarget.parentNode.classList.add('focus');
            };

            function checkboxBlur(event) {
              event.currentTarget.parentNode.classList.remove('focus');
            };

            window.onload=function() {
              var i;

              var mixed = document.querySelectorAll('[role="checkbox"]');

              for (i = 0; i < mixed.length; i++) {
                var m = new CheckboxMixed(mixed[i]);
                m.init();
              }

              var checkboxes = document.querySelectorAll('input[type="checkbox"]');

              for (i = 0; i < checkboxes.length; i++) {
                var cb = checkboxes[i];
                cb.addEventListener('focus', checkboxFocus);
                cb.addEventListener('blur', checkboxBlur);
              }

            }
          
  </script>
</div>