Bootstrap Checkbox X

Star Fork Watch Follow

Thankful to Krajee! BUY A COFFEEor to get more out of us.

An extended checkbox plugin for Bootstrap built using JQuery, which allows three checkbox states and includes additional styles. The plugin uses Bootstrap markup and CSS 3 styling by default, but it can be overridden with any other CSS markup. It also helps you to fallback to a native checkbox OR display native checkboxes with tristate capability.View a complete demo.

With v1.5.4, the plugin now supports initializing widget on a SELECT input as well (other than a CHECKBOX or TEXT input).

Tip

Not seeing the updated content on this page! Hard refresh your browser to clean cache for this page (e.g. SHIFT-F5 on Windows Chrome)

Note

The latest version of the plugin v1.5.4 has been released. Refer the CHANGE LOG for details.

Enhances any HTML input (preferrably text input) with data-toggle=checkbox-x to an extended checkbox control.
The plugin offers the following three states and values for the checkboxes:
- 1: Checkbox is checked. This value is configurable through valueChecked property.
- 0: Checkbox is unchecked. This value is configurable through valueUnchecked property.
- null: Checkbox is indeterminate. This value is configurable through valueNull property.
You can set the plugin to allow three states or the default two states for the checkbox.
Built to work with Bootstrap 5.x or 4.x or 3.x styles. One can configure the checked, unchecked, and indeterminate icons to be shown for the checkboxes.
Special CSS 3 styling, to enhance the control to look like any Bootstrap form control. Supports the has-error, has-success, has-warning styling states like other Bootstrap form-controls.
Plugin CSS styling automatically defaults the checkboxes to inline display. You can also control the markup for block display like in checkbox lists.
You can add a label before or after with a for attribute and click on the label to change the checkbox values. Alternatively you can enclose the input within a label tag as well.
Ability to navigate to the checkbox controls via keyboard, and modify the values using the space bar on the keyboard.
Ability to size the checkbox control. Five prebuilt size templates are available xl, lg, md, sm, and xs.
Triggers JQuery events for advanced development. The plugin automatically triggers the change event for the input, whenever the checkbox value is changed via clicking. Events currently available are change and checkbox.reset.
Ability to access methods and refresh the input dynamically via javascript at runtime.
Disabled and readonly checkbox input support.
Allow third state to be configured (only on init) for two state checkboxes.
Added support for displaying native checkboxes with tristate capability. When displaying native checkboxes, the advanced styling offerred by the plugin will not be available.

Note

The checkbox plugin stores the values as character format (and not boolean format) for checked and unchecked states. This can be overridden by setting valueChecked, valueUnchecked and valueNull properties.

Latest JQuery
Most modern browsers supporting CSS3, HTML5 inputs, & JQuery.
Bootstrap 3.x is optional and used by default, but can be overridden to use any CSS.

The bootstrap-checkbox-x plugin can be installed automatically or manually using one of these options:

Bower Package Manager

Installation via bower package manager is as simple as running:

$ bower install bootstrap-checkbox-x

Node Package Manager

Installation via NPM is as simple as running:

$ npm install bootstrap-checkbox-x

Composer Package Manager

You can install bootstrap-checkbox-x via composer package manager. Either run:

$ php composer.phar require kartik-v/bootstrap-checkbox-x "dev-master"

or add:

"kartik-v/bootstrap-checkbox-x": "dev-master"

to your composer.json file

Manual Install

You can also manually install the plugin easily to your project. Just download the source ZIP or TAR ball and extract the plugin asset files and folders into your project.

Step 1: Load the following assets in your header.

<!-- bootstrap 5.x or 4.x or 3.x is supported. -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css">
<link href="https://cdn.jsdelivr.net/gh/kartik-v/bootstrap-checkbox-x@1.5.7/css/checkbox-x.min.css" media="all" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/kartik-v/bootstrap-checkbox-x@1.5.7/js/checkbox-x.min.js"></script>
<!-- optional if you are using themes -->
<link href="https://cdn.jsdelivr.net/gh/kartik-v/bootstrap-checkbox-x@1.5.7/css/theme-krajee-flatblue.min.css" media="all" rel="stylesheet" type="text/css" />

If you noticed, you need to load the jquery.min.js and bootstrap.min.css in addition to the checkbox-x.min.css and checkbox-x.min.js. Loading the theme file theme-krajee-flatblue.min.css is optional and is needed if you want to override the default theme. Read the theme property of the plugin for understanding configuration details for themes.

Step 2a: Initialize the plugin on your page. For example,

<!-- enclose the checkbox input & label in container with class `cbx-krajee`
  -- and also add the `cbx-label` class to your checkbox labels -->

<div class="cbx-krajee">
   <input id="input-id" type="checkbox" value="1" checked>
   <label for="input-id" class="cbx-label"></label>
</div>

<script>
$(document).on("ready", function() {
    // initialize with defaults
    $("#input-id").checkboxX();

    // with plugin options
    $("#input-id").checkboxX({threeState: true, size:'lg'});
});
</script>

The #input-id is the identifier for the input on your page, which is hidden automatically by the plugin.

Step 2b: Alternatively, you can directly set the plugin options to any input, through HTML 5 data attributes to your input field.

<input id="input-id" type="checkbox" checked value="1" data-toggle="checkbox-x" data-three-state="true" data-size="lg">

Note

The plugin will automatically convert inputs with data-toggle set to checkbox-x to a Checkbox X control.
You should wrap the input and label in a container with CSS class cbx-krajee for better alignment.
You should add the CSS class cbx-label to the labels for your checkbox inputs to style them similar to bootstrap's checkbox labels (with additional enhancements for contextual colors).

View a complete demo.

The plugin supports these following options:

theme

string, the name of the theme to be used. This will automatically append the cbx-themeName CSS class to the checkbox container and can be used for overriding the styles. Defaults to empty string. The plugin includes an additional theme named krajee-flat. The CSS for this theme file is included in theme-krajee-flatblue.css in the CSS folder. If you set theme to krajee-flatblue, the CSS class cbx-krajee-flatblue will automatically be appended to the checkbox container. Note that the theme CSS file must be loaded after checkbox-x.css on the page.

threeState

boolean whether to use three states for the checkbox. This will allow you to save null values, in addition to the built in 1 and 0 values. Defaults to true. If set to false, it will allow only the default two values: 1 and 0.

allowThreeValOnInit

boolean whether to allow three values for two state checkboxes on initialization (i.e. when threeState is false. Defaults to false. If set to true for a two state checkbox, one can also have an indeterminate (empty) value displayed on initialization.

inline

boolean, whether the checkboxes are to be styled in an inline-block with other elements placed before or after. Defaults to true. If set to false, checkboxes will be displayed as a block (like in checkbox lists).

useCrossIcon

boolean, whether to use the cross check mark indicator instead of the tick check mark for iconChecked property. This will be validated only if you do not set the iconChecked property. Defaults to false.

iconChecked

string, the html markup for the icon to be displayed when the checkbox is checked. If not set, defaults to following based on useCrossIcon property:

if useCrossIcon is false defaults to a check mark SVG markup ( ) as shown below:

<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="cbx-icon-krajee" viewBox="0 0 16 16"><path d="M13.485 1.431a1.473 1.473 0 012.104 2.062l-7.84 9.801a1.473 1.473 0 01-2.12.04L.431 8.138a1.473 1.473 0 012.084-2.083l4.111 4.112 6.82-8.69a.486.486 0 01.04-.045z"></path></svg>

if useCrossIcon is true defaults to a cross mark SVG markup ( ) as shown below:

<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="cbx-icon-krajee" viewBox="0 0 16 16"><path d="M1.293 1.293a1 1 0 011.414 0L8 6.586l5.293-5.293a1 1 0 111.414 1.414L9.414 8l5.293 5.293a1 1 0 01-1.414 1.414L8 9.414l-5.293 5.293a1 1 0 01-1.414-1.414L6.586 8 1.293 2.707a1 1 0 010-1.414z"></path></svg>

iconUnchecked

string, the html markup for the icon to be displayed when the checkbox is unchecked. Defaults to a blank character .

iconNull

string, the html markup for the icon to be displayed when the checkbox is null. Defaults to a filled square SVG markup ( ) as shown below:

<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="cbx-icon-krajee" viewBox="0 0 16 16"><path d="M0 2a2 2 0 012-2h12a2 2 0 012 2v12a2 2 0 01-2 2H2a2 2 0 01-2-2V2z"></path></svg>

iconCheckedCss

string, the CSS class to be applied to the icon container containing the checked icon markup as set in iconChecked property.

iconUncheckedCss

string, the CSS class to be applied to the icon container containing the unchecked icon markup as set in iconUnchecked property.

iconNullCss

string, the CSS class to be applied to the icon container containing the null icon markup as set in iconNull property.

valueChecked

int|string, the value when the checkbox is checked. Defaults to string '1'.

valueUnchecked

int|string, the value when the checkbox is unchecked. Defaults to string '0'.

valueNull

int|string, the value when the checkbox is indeterminate (for three state). Defaults to empty string ''.

size

string size of the checkbox control. Should be one of xl, lg, md, sm, or xs. Defaults to md.

enclosedLabel

boolean, whether the checkbox input is enclosed inside a label. Defaults to false. Setting it to true is important if you have enclosed the base input inside a label tag.

useNative

boolean, whether to display the native checkbox control instead of the advanced styled input generated by the plugin. Defaults to false. This property will be applied only if your source element is a checkbox input. Setting it to true will allow you to use a threeState native checkbox. Note that when you have set useNative to true, you will lose the advanced styling features offerred by bootstrap-checkbox-x.

tabindex

int, the tabindex property for the checkbox input. Defaults to `1000`. If set to empty, `0` or `false`, no tabindex will be assigned. You can set it to `-1` if you need to navigate first on the input via the tab key.

The plugin supports these events:

change

This event is triggered when the Checkbox X is modified or changed:

Example:

$('#input-id').on('change', function() {
    console.log('checkbox changed');
});

checkbox:resetinput

This event is triggered when the rating is reset using the reset method or by resetting the form.

Example:

$('#input-id').on('checkbox:resetinput', function(event) {
    console.log("checkbox:resetinput");
});

The plugin supports these methods:

refresh

Use this method to dynamically refresh the checkbox control options via javascript after the plugin has been initialized. The method accepts the plugin options entered as an array.

// Example: Call the method below in checkbox control.change event to disable the checkbox control and
// change the size to 'xl'.
$('#input-id').attr('disabled', 'disabled');
$('#input-id').checkboxX('refresh', {size: 'xl'});

reset

Reset the checkbox control to the initial value. For example after a form reset.

$('#input-id').checkboxX('reset');

destroy

Use this method to destroy the plugin and revert back the native input to original state.

$('#input-id').checkboxX('destroy');

The plugin has been implemented as extensions in the following frameworks

Sl.	Framework	Extension Source	Developed By	Extension Demo
1.	Yii Framework 2.0	Yii2 Checkbox X	Krajee	Yii2 Checkbox X

Do you know any other framework extension using this plugin which is not listed here? Tell us so that we can consider its inclusion in this list.

bootstrap-checkbox-x is released under the BSD 3-Clause License. See the bundled LICENSE.md for details.

Note

You can now visit the Krajee Webtips Q & A forum for searching OR asking questions OR helping programmers with answers on these extensions and plugins. For asking a question click here. Select the appropriate question category (i.e. Krajee Plugins) and choose this current page plugin in the question related to field.

The comments and discussion section below are intended for generic discussions or feedback for this plugin. Developers may not be able to search or lookup here specific questions or tips on usage for this plugin.

visitors to Krajee Jquery Plugins since 22-May-2017