Socket
Socket
Sign inDemoInstall

checkboxjs

Package Overview
Dependencies
0
Maintainers
1
Versions
4
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

    checkboxjs

Create an accessibile checkbox out of pretty much any HTML markup


Version published
Weekly downloads
7
Maintainers
1
Install size
1.72 MB
Created
Weekly downloads
 

Readme

Source

Checkbox.js CircleCI

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:

<label for="checkbox">Subscribe?</label>
<span id="checkbox"></span>

We can create a new checkbox out of a span by passing the element to checkbox.js:

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:

<label for="checkbox" id="jsze4iuu8c">Subscribe?</label>
<span id="checkbox" tabindex="0" role="checkbox" aria-labelledby="jsze4iuu8c" aria-checked="false"></span>
Passing a label directly

If you would like you can pass a reference to the label directly to checkbox.js:

<label id="label">Subscribe?</label>
<span id="checkbox"></span>
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.

<label id="label">Subscribe?</label>
<span id="checkbox"></span>
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.

<label for="checkbox">Subscribe?</label>
<span id="checkbox"></span>
// init an unchecked checkbox
let checkbox = new Checkbox(document.getElementById('checkbox'));

checkbox.toggleCheckbox(); // toggles to checked

Keywords

FAQs

Last updated on 16 Oct 2017

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc