https://github.com/rbague/stimulus-check-all
A Stimulus Controller to implement check-all checkbox feature
https://github.com/rbague/stimulus-check-all
check-all checkbox stimulus stimulus-controller stimulusjs
Last synced: 15 days ago
JSON representation
A Stimulus Controller to implement check-all checkbox feature
- Host: GitHub
- URL: https://github.com/rbague/stimulus-check-all
- Owner: rbague
- License: mit
- Created: 2020-05-23T22:06:38.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2025-06-29T16:40:39.000Z (7 months ago)
- Last Synced: 2025-09-23T23:38:53.710Z (4 months ago)
- Topics: check-all, checkbox, stimulus, stimulus-controller, stimulusjs
- Language: JavaScript
- Homepage: https://npm.im/stimulus-check-all
- Size: 416 KB
- Stars: 10
- Watchers: 1
- Forks: 5
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# Stimulus CheckAll
[](https://www.npmjs.com/package/stimulus-check-all)
[](#)
[](https://github.com/rbague/stimulus-check-all/blob/master/LICENSE)
A wrapper for [@github/check-all] as a Stimulus Controller.
Keep track of all the changes in the [Changelog](https://github.com/rbague/stimulus-check-all/blob/master/CHANGELOG.md)
## Install
This package assumes that you have [Stimulus](https://stimulusjs.org/handbook/installing) installed and set up.
Install the library in your project with:
```sh
yarn add stimulus-check-all
# or
npm install --save stimulus-check-all
```
And register the controller in your application
```js
import { Application } from "stimulus"
import CheckAll from "stimulus-check-all"
const application = Application.start()
application.register("check-all", CheckAll)
```
You can also use a UMD build directly from UNPKG, which will make the controller globally available as `StimulusCheckAll` (it also bundles `@github/check-all`)
```html
```
There is also a CommonJS build on UNPKG:
```
https://unpkg.com/stimulus-check-all/dist/stimulus-check-all.js
https://unpkg.com/stimulus-check-all/dist/stimulus-check-all.min.js
```
## Usage
For the most basic usage create a div with some checkboxes.
In the case you want to exclude some checkboxes from the check-all features, add a `data-skip` attribute to those checkboxes.
```html
Count: 0
Check All
github/fetch
github/textarea-autosize
github/eventlistener-polyfill
github/quote-selection
skip-this-one
```
### Targets
All of them are optional, as they are in [@github/check-all].
- `all`: The checkbox used to check all of the other ones in the container
- `count`: Displays the number of selected checkboxes
## Extending controller
You can extend the functionality of the controller using inheritance. Just remember to call super if overriding any of the parent's methods, like `connect` or `disconnect`:
```js
import CheckAllController from 'stimulus-check-all'
export default class extends CheckAllController {
connect () {
super.connect()
// your custom code
}
}
```
Apart from access to the targets defined in the parent class, the controller exposes three other properties:
- `checkboxes`: All the checkboxes where the check-all feature is applied
- `checked`: The checked checkboxes
- `unchecked`: The unchecked checkboxes
## Contributing
Bug reports and pull requests are more than welcome on [GitHub](https://github.com/rbague/stimulus-check-all).
### Coding standards
This project uses Standard to minimize bike shedding related to code formatting.
Please run `npm run lint` prior submitting pull requests.
## License
The software is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).
[@github/check-all]: https://github.com/github/check-all