Sandbox: JavaScript

Allows you to check or uncheck a group of checkboxes en-masse.

checkAll checkNone

one
two
three
four
five

<p>
	<a class="btn btn-default" data-trigger="checkAll" data-checkall-targets ="!body .chex input">checkAll</a>
	<a class="btn btn-default" data-trigger="checkNone" data-checknone-targets="!body .chex input">checkNone</a>
</p>
<p class="chex">
	<input type="checkbox"/> one<br/>
	<input type="checkbox"/> two<br/>
	<input type="checkbox"/> three<br/>
	<input type="checkbox"/> four<br/>
	<input type="checkbox"/> five<br/>
</p>

checkToggleAll

checkToggleAll allows you to use another checkbox to toggle all, and has additional options:

classTarget
a selector relative to the targets to apply class to.
class
a class name to apply to classTarget






<div class="chexAll">
  <label>
    <input type="checkbox" data-trigger="checkToggleAll" data-checktoggleall-options= "
      'targets': '!div.chexAll input',
      'classTarget': '!label',
      'class': 'red'
    " />
    all or none
  </label><br/>
  <label>
    <input type="checkbox"/>
    Here's a label
  </label><br/>
  <label>
    <input type="checkbox"/>
    Here's a label
  </label><br/>
  <label>
    <input type="checkbox"/>
    Here's a label
  </label><br/>
  <label>
    <input type="checkbox"/>
    Here's a label
  </label><br/>
  <label>
    <input type="checkbox"/>
    Here's a label
  </label><br/>
</div>

Related Documentation

Note: Not all links in these work.

Delegator Triggers: checkAll, checkNone, checkToggleAll

Provides click event delegators for selecting or deselecting a group of checkboxes.

checkAll, checkNone

Example

<div class="chex">
    <a data-trigger="checkAll" data-checkall-options ="'targets': '!div.chex input'">checkAll</a>
    <a data-trigger="checkNone" data-checknone-options="'targets': '!div.chex input'">checkNone</a></p>
    <hr/>
    <input type="checkbox"/>
    <input type="checkbox"/>
    <input type="checkbox"/>
    <input type="checkbox"/>
    <input type="checkbox"/>
</div>

Options

  • targets - (string; required) a selector that will return the inputs to check/uncheck.

checkToggle

Example

<div class="chex">
    <label>
        <input type="checkbox" data-trigger="checkToggleAll" data-checktoggleall-options= "
            'targets': '!div.chex input',
            'classTarget': '!label',
            'class': 'red'
        " />
        Here's a label
    </label>
    <label>
        <input type="checkbox"/>
        Here's a label
    </label>
    <label>
        <input type="checkbox"/>
        Here's a label
    </label>
    <label>
        <input type="checkbox"/>
        Here's a label
    </label>
    <label>
        <input type="checkbox"/>
        Here's a label
    </label>
    <label>
        <input type="checkbox"/>
        Here's a label
    </label>
</div>

Options

  • targets - (string; required) a selector that will return the inputs to check/uncheck.
  • class - (string; optional) a class to apply to the targets' classTarget.
  • classTarget - (string; optional) a selector relative to the targets to apply class to.

See Also

MooTools' selector engine (Slick) supports reversed combinators.