Simple Button Checks is a simple plugin to convert checkbox inputs into HTML buttons for CSS customization. High performance, keyboard support, and preservation of original click/change events.

custom checkbox css, multiselect dropdown with checkbox jquery plugin, jquery custom checkbox, checkbox alternative html, pretty checkbox, simple checkbox css

How to make use of it:

1. Load the necessary jQuery library and Bootstrap stylesheet into your HTML document.

<link rel="stylesheet" href="/path/to/bootstrap.min.css">
<script src="/path/to/jquery.min.js"></script>

2. Load the simpleBtChecks plugin stylesheet and JS files into the document.

<link rel="stylesheet" href="css/simple-bt-checks.css">
<script src="js/simple-bt-checks.js"></script>

3. Call the function on your checkboxes.

$('input[type="checkbox"]').simpleBtChecks();

4. Change the default styles using the following options.

$('input[type="checkbox"]').simpleBtChecks({

  buttonClass: "sbc-default",
  checkedIcon : '<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"/></svg>',
  nonCheckedIcon : '',

  // 'none' or 'input' or 'all'
  wrapContainer : 'none', 

  // add click listener if label has rel with label for -> input id
  // <label for="country"></label> <input id="country" type="checkbox">
  strictLabel : true,

  btnAttributes : {
    'type' : 'button'
  },

});

5. Callback functions available.

$('input[type="checkbox"]').simpleBtChecks({

  onInit : null,
  onChange : null,
  changeCallback : null,
  onDestroy: null

});

Customizable Checkbox Plugin with jQuery and Bootstrap, Simple-button-checks 3 Plugin/Github, multi select plugin

See Demo And Download

Official Website(joelthorner): Click Here

This superior jQuery/javascript plugin is developed by joelthorner. For extra Advanced Usage, please go to the official website.