@github/check-all

Multiple checkbox selection helper.

Stats

StarsIssuesVersionUpdatedCreatedSize
@github/check-all
5520.4.0a year ago3 years agoMinified + gzip package size for @github/check-all in KB

Readme

Check All

  • Check/uncheck [data-check-all] to check/uncheck all checkboxes in a container.
  • Shift click on [data-check-all-item] to select all checkboxes between the last checked checkbox and the target checkbox.
  • Auto-update [data-check-all-count] to count of checked items.

Installation

$ npm install @github/check-all

Usage

JS

import checkAll from '@github/check-all'
checkAll(document.querySelector('[data-check-all-container]'))

Using a library like selector-observer, the behavior can automatically be applied to any container matching a selector.

import {observe} from 'selector-observer'
import checkAll from '@github/check-all'

observe('[data-check-all-container]', { subscribe: checkAll })

HTML

<div data-check-all-container>
  Count: <span data-check-all-count>0</span>
  <label><input type="checkbox" data-check-all> Check All</label>
  <label><input type="checkbox" data-check-all-item> github/fetch</label>
  <label><input type="checkbox" data-check-all-item> github/textarea-autosize</label>
  <label><input type="checkbox" data-check-all-item> github/eventlistener-polyfill</label>
  <label><input type="checkbox" data-check-all-item> github/quote-selection</label>
</div>

Development

npm install
npm test

License

Distributed under the MIT license. See LICENSE for details.

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.