Customizable Checkbox Plugin with jQuery and Bootstrap - simpleBtChecks

Simple Bt Checks is a simple jQuery plugin used to beautify the default checkboxes using Bootstrap button styles, Glyphicons or your own styles.

How to use it:

1. Load the necessary jQuery library and Bootstrap's stylesheet in 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's stylesheet and JS files in 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 and done. By default, the plugin uses Bootstrap's default button styles and the glyphicon-ok icon to replace the default checkbox styles.

$('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. Available callback functions.

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

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

});

Changelog:

v3.0.8 (2018-07-08)

• Fix apply method on elements without data

v3.0.7 (2018-07-08)

• JS & CSS update

v3.0.6 (2018-06-07)

• JS & CSS update
• Add more examples

v3.0.3 (2018-05-21)

• JS & CSS update

v3.0.2 (2018-05-13)

• Removed bootstrap option
• Removed size option
• BtnClass option named to buttonClass
• Renamed namespaces 'sbtc' to 'sbc'
• Basic CSS It is better to customize it according to the project
• Check icon to innerHTML svg
• Renamed plugin
• New documentation
• New id for buttons created

---

This awesome jQuery plugin is developed by joelthorner. For more Advanced Usages, please check the demo page or visit the official website.