Simple Plugin to Transform Checkbox Inputs to HTML Buttons

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.


4. Change the default styles using the following options.


  buttonClass: "sbc-default",
  checkedIcon : '<svg aria-hidden="true" xmlns="" 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.


  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.

Related Posts


Bootstrap 4 Sidebar Menu Responsive Template | MDB

Bootstrap Side Navbar – Responsive sidebar template based on the Bootstrap 4 framework. An easy-to-use, totally responsive, Google Material Design impressed aspect navigation for modern web app…


Bootstrap 5 Treeview Dynamically Collapsible | bs5treeview

Bootstrap 5 Tree View is a very simple plug-in for creating a basic and elegant Treeview using BS5. For use with Bootstrap 5, the attributes have been…


Responsive FAQ Accordion Dropdown In HTML and CSS

How to create responsive accordion Expandable and Collapsible Frequently Asked Questions Elements. Accordion HTML, is an easy and seamless accordion FAQ component built with CSS and HTML…


Modern Mobile Touch Slider With Acceleration Transitions | Swiper

Swiper is the most modern free mobile touch slider with accelerated device transitions and amazing original behavior. It is intended for use in mobile websites, mobile web…


[Steps] A Simple, Lightweight jQuery Step Wizard Plugin

jQuery steps wizard is a simple and lightweight plugin. The step is a jQuery plugin that turns any grouped elements into a step-by-step wizard with navigation buttons…


Responsive Image Gallery Lightbox jQuery Plugin | VenoBox

VenoBox is a responsive jQuery modal window plugin suitable for images, embedded content, iFrames, Google Maps, Vimeo, and YouTube videos. The big difference compared to many other…

Leave a Reply

Your email address will not be published. Required fields are marked *