https://github.com/Robdel12/checkbox

Create a functional & accessibile checkbox out of pretty much any HTML markup.
https://github.com/Robdel12/checkbox

Last synced: 3 months 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 (over 7 years ago)
• Default Branch: master
• Last Pushed: 2021-08-01T11:14:33.000Z (over 3 years ago)
• Last Synced: 2024-07-31T01:46:13.905Z (4 months ago)
• Language: JavaScript
• Homepage: https://robdel12.github.io/checkbox/
• Size: 1.71 MB
• Stars: 7
• Watchers: 1
• Forks: 3
• Open Issues: 29
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md

Awesome Lists containing this project

README

        
# Checkbox.js [![CircleCI](https://circleci.com/gh/Robdel12/checkbox.svg?style=svg&circle-token=641acbeadd66ab804551bfc7f31b053e760f1b1b)](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

```