Skip to content
Multiple checkbox selection helper.
JavaScript
Branch: master
Clone or download
Latest commit 4b108b6 Oct 10, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github/workflows Use GitHub CI Sep 11, 2019
examples Fix demo page Aug 31, 2018
test Indeterminate state should be updated when check-all box is changed Oct 4, 2019
.babelrc
.eslintrc.json Initial commit Aug 30, 2018
.flowconfig Initial commit Aug 30, 2018
.gitignore Initial commit Aug 30, 2018
.travis.yml Initial commit Aug 30, 2018
LICENSE Initial commit Aug 30, 2018
README.md Update readme with stolen text from Josh Aug 31, 2018
check-all.js Indeterminate state should be reset when check-all item is updated Oct 4, 2019
check-all.js.flow Export default subscribe Aug 31, 2018
index.d.ts add typescript definition file Sep 11, 2019
package-lock.json 0.2.6 Oct 10, 2019
package.json 0.2.6 Oct 10, 2019
prettier.config.js Initial commit Aug 30, 2018

README.md

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.

You can’t perform that action at this time.