jQuery Plugin For Custom Bootstrap Checkboxes - bootstrap-checkbox-x

File Size: 37.3 KB
Views Total: 5610
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
jQuery Plugin For Custom Bootstrap Checkboxes - bootstrap-checkbox-x

A lightweight jQuery extension for Bootstrap that enhances the default Bootstrap checkbox input with 3 states (checked, unchecked, tri-state), custom CSS styles and contextual colors.

More features:

  • Custom checked, unchecked markers.
  • Easy to style using your own CSS.
  • 5 checkbox sizes: xl, lg, md, sm, or xs

How to use it:

1. Download the plugin and include the jQuery bootstrap-checkbox-x's JavaScript & CSS files into the webpage which has jQuery and Bootstrap installed.

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

2. Call the function on your existing checkbox input and done.

<input id="input-id" value="1">

3. You're also allowed to initialize the plugin by adding the data-toggle="checkbox-x" to your radio input:

<input id="input-id" value="1" data-toggle="checkbox-x">

4. All possible plugin options. The following options can be set using data-OPTION attributes or passed in an options JavaScript object when calling .checkboxX().

  theme: '',
  threeState: true,
  inline: true,
  iconChecked: '<i class="glyphicon glyphicon-ok"></i>',
  iconUnchecked: ' ',
  iconNull: '<div class="cbx-icon-null"></div>',
  valueChecked: '1',
  valueUnchecked: '0',
  valueNull: '',
  size: 'md',
  enclosedLabel: false,
  useNative: false,
  allowThreeValOnInit: false,
  tabindex: "1000"
<input id="input-id" value="1" 


v1.5.7 (2021-09-19)

  • New boolean property useCrossIcon for checked indicator.
  • Revamp bootstrap checkbox-x markup for better styling & alignment across Bootstrap versions.
  • Enhancements to support all bootstrap versions (5.x, 4.x. and 3.x) enhancement
  • Use enhanced SVG icons
  • Allow custom icon CSS for checked, unchecked and null states.

v1.5.6 (2021-05-20)

  • Update CDN version to use jsdelivr.

v1.5.5 (2018-11-03)

  • Add github contribution and issue/PR log templates.
  • Rename events to start with checkbox: instead of ending with .checkbox .
  • Correct package.json.
  • Add support for bootstrap-sass through new sass branch.
  • Display initial value correctly when initializing with checkbox
  • New property allowThreeValOnInit for showing third state on init for two state checkboxes.
  • Use string values instead of integers.

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