@patternslib/patternslib/src/pat/checklist/documentation.md

Patternslib is a JavaScript library that enables designers to build rich interactive prototypes without the need for writing any Javascript. All events are triggered by classes and other attributes in the HTML, without abusing the HTML as a programming la

## Description

The checklist pattern provides a convenient method to add options to
select and deselect all checkboxes in a block.

## Documentation

The checklist pattern provides a convenient method to add options to
select and deselect all checkboxes in a block. This requires two changes
in your markup:

1.  add a `pat-checklist` class to the containing element
2.  add a select and deselect buttons or a toggle checkbox

Here is a simple example.

    <fieldset class="pat-checklist">
      <div class="functions">
        <button class="select-all">Select all</button>
        <button class="deselect-all">Deselect all</button>
      </div>

      <label><input type="checkbox" checked="checked"/> Option one</label>
      <label><input type="checkbox"/> Option two</label>
      <label><input type="checkbox"/> Option three</label>
      <label><input type="checkbox"/> Option four</label>
    </fieldset>

An example with toggle checkbox.

    <fieldset class="pat-checklist">
      <label><input type="checkbox" class="toggle-all"> Select all/none</label>
      <label><input type="checkbox" checked="checked"/> Option one</label>
      <label><input type="checkbox"/> Option two</label>
      <label><input type="checkbox"/> Option three</label>
      <label><input type="checkbox"/> Option four</label>
    </fieldset>

The selectors used to find the select-all and deselect-all buttons are
configurable. The default values are `.functions .select-all` and
`.functions .deselect-all`. You can configure them using shorthand
notation:

    <fieldset class="pat-checklist" data-pat-checklist=".selectAll .deselectAll">

or using the extended notation:

    <fieldset class="pat-checklist" data-pat-checklist="select: .selectAll; deselect: .deselectAll">

The buttons will be disabled if they would not make any changes. That
is: if all checkboxes are already checked the select-all button will be
disabled. And if no checkboxes are checked the deselect-all button will
be disabled.


### Option reference

| Property    | Type    | Default Value    | Description                                                                                                                                                                                                    |
| ----------- | ------- | ---------------- | -------------------------------------------- |
| `select`    | String  | `.select-all`    | CSS selector for the "Select All" button.    |
| `deselect`  | String  | `.deselect-all`  | CSS selector for the "Deselect All" button.  |
| `toggle`    | String  | `.toggle-all`    | CSS selector for the "Toggle" button.        |