Customizable Checkbox Plugin with jQuery Bootstrap simpleBtChecks - Download Customizable Checkbox Plugin with jQuery and Bootstrap - simpleBtChecks

Download Customizable Checkbox Plugin with jQuery and Bootstrap – simpleBtChecks

By Posted on

This time I will share jQuery Plugin and tutorial about Customizable Checkbox Plugin with jQuery and Bootstrap – simpleBtChecks, hope it will help you in programming stack.

Customizable Checkbox Plugin with jQuery Bootstrap simpleBtChecks - Download Customizable Checkbox Plugin with jQuery and Bootstrap - simpleBtChecks
File Size: 239 KB
Views Total: 1567
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Demo Download

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.

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

2. Load the simpleBtChecks plugin’s stylesheet and JS files in the document.

view source
1 <link rel="stylesheet" href="css/simple-bt-checks.css">
2 <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.

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

4. Change the default styles using the following options.

view source
01 $('input[type="checkbox"]').simpleBtChecks({
02  
03   buttonClass: "sbc-default",
04   checkedIcon : '<svg aria-hidden="true" http://www.w3.org/2000/svg">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>',
05   nonCheckedIcon : '',
06  
07   // 'none' or 'input' or 'all'
08   wrapContainer : 'none',
09  
10   // add click listener if label has rel with label for -> input id
11   // <label for="country"></label> <input id="country" type="checkbox">
12   strictLabel : true,
13  
14   btnAttributes : {
15     'type' : 'button'
16   },
17  
18 });

5. Available callback functions.

view source
1 $('input[type="checkbox"]').simpleBtChecks({
2  
3   onInit : null,
4   onChange : null,
5   changeCallback : null,
6   onDestroy: null
7  
8 });

Changelog:

v3.0.7 (2018-07-08)

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.

source : jquery.net

Related posts: