Skip to content

github/check-all

Folders and files

NameName
Last commit message
Last commit date
Feb 28, 2022
Mar 25, 2022
Aug 15, 2023
May 15, 2024
May 15, 2024
May 26, 2020
Aug 30, 2018
Sep 23, 2022
Apr 9, 2020
Aug 31, 2018
Jan 29, 2022
Sep 20, 2024
Oct 25, 2023
May 26, 2020

Repository files navigation

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.