CheckBox.js

The checkBox.js lightweight plugin is used to style and manage customized checkboxes on web pages. It does not override the default checkbox but only improves the way it is being rendered through the use of custom checkboxes. This plugin comes with 20 plus custom checkbox image pairs with extended support for external icons, labels, toggling effects, animations and navigational controls. A light documentation can be found in the README.md file.

Installation

Download the full package from github and install locally by adding the script into the head section of your project file.

Installation locally


<script src="checkbox/checkBox.js">

You can also install using the CDN Link below

Installation cdn link


https://cdn.jsdelivr.net/gh/teymzz/checkBox/checkBox.js

Image resources are not available through the cdn link. Download the full plugin to get the resources or use your preferred custom images.

Plugin Setup

Before initializing the plugin, we need to setup the html structure correctly. This can be done by defining a custom checkbox element followed by its relative native checkbox. This is shown below:

Checkbox Format

HTML


<div checkbox=""></div> <!-- custom checkbox -->

<input type="checkbox"> <!-- native checkbox -->

Now, we can initialize the plugin using any of the methods below:

Method 1 Method 2


<script>

new CheckBox(); // new instance

</script>


<script>

let checker = new CheckBox(false); // defer instantiation

let checker1 = checker.check(); //new instance

let checker2 = checker.check(); //new instance

</script>

Once initialized, the plugin will automatically hide all native input checkboxes having a custom checkbox controller element on the web page while the custom checkboxes will be displayed.

Basic Sample