Simple button checks

Simple button checks is a simple plugin for transform checkbox inputs into html buttons for css customize. High performance, keyboard support and preserve original input click/change events.

Getting started

1. Include Simple button checks files to website/app

After that we need to include CSS and JS files to our website/app. In your html file:

<!DOCTYPE html>
<html lang="en">
    <head>
        <link rel="stylesheet" href="path/to/simple-button-checks.css">
    </head>
    <body>
        <script src="path/to/jquery/3.x.x.min.js"></script>
        <script src="path/to/simple-button-checks.js"></script>
    </body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

2. Add html inputs

This plugin contemplates several label-input formats:

<div class="checkbox">
   <input type="checkbox" name="example1" id="example1" value="344">
   <label for="example1">Address</label>
</div>
<!-- or -->
<div class="checkbox">
   <label for="example2">Address</label>
   <input type="checkbox" name="example2" id="example2" value="344">
</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

3. Initialize plugin

After load jquery and simple-button-checks js files

$(document).ready(function () {
   // initialize plugin into document ready  
   $('input[type="checkbox"]').simpleButtonChecks();
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Options

Parameter	Type	Default	Description
`buttonClass`	`string`	`'sbr-default'`	Class attribute value for new html button tag
`checkedIcon`	`string`	`'<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'><path d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/></svg>'`	button inner html when input is checked
`nonCheckedIcon`	`string`	`''`	button inner html when input is not checked
`wrapContainer`	`string`	`'none'`	Values: 'none' or 'input' or 'all'. Wrap with a div label and input, only input or nothing.
`btnAttributes`	`object`	`{ type : 'button' }`	Add attribute name - value into new html button. Example: `btnAttributes: { data-title : 'string value' }`

Callbacks

Parameter	Type	Default	Description
`onInit(simpleButtonChecks)`	`function`	`null`	Callback function, will be executed right after plugin initialization
`onChange(simpleButtonChecks)`	`function`	`null`	Function, will be executed right before checkbox input change
`changeCallback(simpleButtonChecks)`	`function`	`null`	Callback function, will be executed right after checkbox input change
`onDestroy(simpleButtonChecks)`	`function`	`null`	Callback function, will be executed when you destroy Swiper

Methods

After we initialize input/s we have its initialized instance in variable (like myInput variable in example below) with helpful methods:

var myInput = $('#check-1').simpleButtonChecks({
   checkedIcon : '<span class="custom-icon"></span>'
});
myInput.simpleButtonChecks('destroy');
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Check / unckeck

For js check or uncheck input use default jQuery prop method into original input with change event:
$('#check-one').prop('checked', true).change();

Or use click event into original input:
$('#check-one').click();

Method	Description
`myInput.simpleButtonChecks('destroy');`	Destroy simpleButtonChecks instance and detach all events listeners
`myInput.simpleButtonChecks('addListener', node);`	Add change checkbox input event to a node. Example: `myInput.simpleButtonChecks('addListener', $('#div-1'));`
`myInput.simpleButtonChecks('disable', boolean);`	Enable \| disable input. Example: `myInput.simpleButtonChecks('disable', true);`

Demo

Customized

Defaults & js check tests

Changelog

3.0.8

Fix on destroy and disable public methods undefined data
Fix apply method on elements without data

3.0.7

Fix bug inputId is undefined

3.0.6

Removed strictLabel option, use native browser function
Update documentation info and add default plugin demos