A Stimulus Controller to implement check-all checkbox feature
npm install stimulus-check-allA wrapper for [@github/check-all] as a Stimulus Controller.
Keep track of all the changes in the Changelog
Install the library in your project with:
``sh`
yarn add stimulus-check-allor
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
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
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 containercount
- : Displays the number of selected checkboxes
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 checkboxesContributing
Bug reports and pull requests are more than welcome on GitHub.
$3
This project uses Standard to minimize bike shedding related to code formatting.Please run
npm run lint` prior submitting pull requests.The software is available as open source under the terms of the MIT License.
[@github/check-all]: https://github.com/github/check-all