Simple button checks

Issue     Star     Download

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>

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>

3. Initialize plugin

After load jquery and simple-button-checks js files

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


Parameter Type Default Description
buttonClass string 'sbr-default' Class attribute value for new html button tag
checkedIcon string '<svg xmlns='' 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'


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


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');

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);



Defaults & js check tests



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


  • Fix bug inputId is undefined


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