https://github.com/Robdel12/checkbox
Create a functional & accessibile checkbox out of pretty much any HTML markup.
https://github.com/Robdel12/checkbox
Last synced: about 1 year ago
JSON representation
Create a functional & accessibile checkbox out of pretty much any HTML markup.
- Host: GitHub
- URL: https://github.com/Robdel12/checkbox
- Owner: Robdel12
- Created: 2017-08-08T01:54:51.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2021-08-01T11:14:33.000Z (almost 5 years ago)
- Last Synced: 2025-04-23T17:12:47.380Z (about 1 year ago)
- Language: JavaScript
- Homepage: https://robdel12.github.io/checkbox/
- Size: 1.71 MB
- Stars: 7
- Watchers: 0
- Forks: 3
- Open Issues: 29
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
# Checkbox.js [](https://circleci.com/gh/Robdel12/checkbox)
Checkbox.js aims to create a functional checkbox out of pretty much
any HTML markup. This allows you to style the checkbox any way you
would like. It gives you full control of the markup.
## Getting started
Given our HTML:
``` html
Subscribe?
```
We can create a new checkbox out of a span by passing the element to
checkbox.js:
``` javascript
new Checkbox(document.getElementById('checkbox'));
```
This will create a checkbox out of that HTMLElement that you
passed. Checkbox.js will try to find a `label` element in the DOM to
associate with the checkbox. If it can't find a `label` it will throw
an error. All checkboxes must have a label.
What your checkbox should look like after using checkbox.js:
``` html
Subscribe?
```
#### Passing a label directly
If you would like you can pass a reference to the label directly to
checkbox.js:
``` html
Subscribe?
```
``` javascript
new Checkbox(document.getElementById('checkbox'), {
label: document.getElementById('label')
});
```
#### Setting the initial state
You can also initialize the checkbox to be checked by default by
passing a `isChecked` key in the `options` object.
``` html
Subscribe?
```
``` javascript
new Checkbox(document.getElementById('checkbox'), {
label: document.getElementById('label'),
isChecked: true
});
```
#### Programmatically change state
If you store a reference to the checkbox when you instantiate it, you
can call methods on that instance like `toggleCheckbox`. This allows
you to toggle the checkbox from actions other than a click or keyboard
event.
``` html
Subscribe?
```
``` javascript
// init an unchecked checkbox
let checkbox = new Checkbox(document.getElementById('checkbox'));
checkbox.toggleCheckbox(); // toggles to checked
```