# checkmates

> Sane checkbox handling for the browser

Latest version **0.1.3** (published 2013-05-23) · MIT license · 0 weekly downloads

## Install

```sh
npm install checkmates
pnpm add checkmates
yarn add checkmates
bun add checkmates
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.3 |
| Published | 2013-05-23 |
| First published | 2013-05-19 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Ben Postlethwaite |
| Maintainers | bpostlethwaite |
| Keywords | checkbox, html, checkmark, widget |

## Links

- npm: https://www.npmjs.com/package/checkmates
- Repository: https://github.com/bpostlethwaite/checkmates
- Issues: https://github.com/bpostlethwaite/checkmates/issues
- npm.io page: https://npm.io/package/checkmates

## Alternatives

- [@tsparticles/shape-image](https://npm.io/package/@tsparticles/shape-image.md) — 303.7K weekly downloads
- [@tsparticles/shape-line](https://npm.io/package/@tsparticles/shape-line.md) — 233.7K weekly downloads
- [stringify-attributes](https://npm.io/package/stringify-attributes.md) — 58.6K weekly downloads
- [mobile-drag-drop](https://npm.io/package/mobile-drag-drop.md) — 46.3K weekly downloads
- [@comunica/actor-rdf-parse-html](https://npm.io/package/@comunica/actor-rdf-parse-html.md) — 29.2K weekly downloads

## Recent versions

- 0.1.3 (latest) — 2013-05-23
- 0.1.2 — 2013-05-22
- 0.0.6 — 2013-05-20
- 0.0.5 — 2013-05-19
- 0.0.4 — 2013-05-19
- 0.0.3 — 2013-05-19
- 0.0.2 — 2013-05-19
- 0.0.1 — 2013-05-19

## README

# CHECKMATES
Module for sane checkbox handling. Create a bunch of html checkbox's and manage with EventEmitter events using checkbox state and value. Get a master checkbox which can check / uncheck all other checkboxes. The master checkbox automatically shows the proper indeterminant states. Can use with a single group, or multiple, each with their own master (each group is an event emitter instance). All checkboxes produced by a particular `checkmates` instance automatically have their class set to the `groupID` the `checkmate` function was instantiated with. The master has the additional CSS class of `groupID-master`.

[Try Them!](http://bpostlethwaite.github.io/checkmates/)

## Example
```javascript
var CheckMate = require('../.')

var result = document.querySelector('#result')
  , checks = document.querySelector('#checks')
  , checkgroup = []

/*
 * Build 5 checkboxes in a group
 */
var checker = CheckMate("groupA")

var i, check
var checked = true
for (i = 0; i < 5; i++) {
  check = checker.checkbox( 'value-' + i )
  checks.appendChild(check)
}

/*
 * Set Master
 */
var master = checker.master( 'value-master' )

checks.insertBefore(master, checks.childNodes[0])


/*
 * Set some eventhandling
 */
checker.on( 'checked', function (checkValue) {
  result.innerText = "checkbox " + checkValue + " checked"
})

checker.on( 'unchecked', function (checkValue) {
  result.innerText = "checkbox " + checkValue + " unchecked"
})

checker.on( 'all-checked', function () {
  result.innerText = "all checkboxes checked"
})

checker.on( 'none-checked', function () {
  result.innerText = "all checkboxes unchecked"
})
```

## API
#### Create new group
`group = Checkmate("groupID")`

#### Create new checkbox
Create a checkbox part of group `groupID`
`checkbox = group.checkbox(value [, data])`
where `value` is a `String` and is set to the html checkbox's value attribute. `data` is an optional arbitrary data object you can normally pass around with event emitters.
Also checkbox html class is set to `groupID`

#### Create new master
Create a master checkbox for group `groupID`
`master = group.master(value [, data])`
Master behaves as a checkbox but also if any checkboxes are set, the master is put into an indeterminate state. Clicking master in the indeterminate state will uncheck all checkboxes part of group `groupID`. Clicking master when nothing is checked will check all checkboxes part of group `groupname` including master. Master has the additional CSS class `groupID-master`.
Creating a new master just overwrites the old master - and is as of yet, untested.

#### Checked Checkboxes
Often you want to know what checkboxes are checked, so you use the `group.checked` object. The keys are the `value` parameter and the values are the checkmate checkbox elements.

#### Checkmates
`group.checkmates` is an array of all the checkmate checkboxes part of group `groupID`.

#### checkAll
`group.checkall()` does what it says. It checks all non-master checkmate checkboxes.

#### uncheckAll
`group.uncheckAll()` unchecks all checked checkmate checkboxes. (say that five time quickly)

#### Remove all
`group.removeAll()` removes all checkboxes associated with group `groupID` properly. That is, it unchecks them first, removing them from `group.checked` before performing the remove on `group.checkmates`.


## Install
```shell
npm install checkmates
```

### Browser
Write your code then do
```shell
browserify main.js -o bundle.js
```
and put `bundle.js` in your `index.html`
see [browserify](https://github.com/substack/node-browserify)

### Works great with [node-webkit](https://github.com/rogerwang/node-webkit)
Just include it normally. Good for single-page apps

## License
MIT

---
_Source: https://npm.io/package/checkmates · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._