Thankful to Krajee!
to get more out of us.

Basic usage examples of the CheckboxX plugin.


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)

Automatically convert an input to a bootstrap checkbox x control by setting its data-toggle attribute as checkbox-x. Note the special styling on hover and focus similar to a bootstrap 3 form-control (and yet different than the native checkbox). You can navigate to and control checkbox values using keyboard (e.g. using TAB and the SPACE bar). The special class cbx-label on the label tag will make the labels styled similar to bootstrap 3 native checkbox labels.
<label for="input-10a" class="cbx-label">Checked</label>
<input type="checkbox" id="input-10a" value="1" checked data-toggle="checkbox-x">
<label for="input-10b" class="cbx-label">Unchecked</label>
<input type="checkbox" id="input-10b" value="0" data-toggle="checkbox-x">
<label for="input-10c" class="cbx-label">Indeterminate</label>
<input type="checkbox" id="input-10c" data-toggle="checkbox-x">
<script>document.getElementById('input-10c').indeterminate = true;</script>
Set the checkbox x rating control to be readonly or disabled. You can use a text input instead of a checkbox to initialize the input as seen in this example.
<label for="input-5a" class="cbx-label disabled">Readonly Input</label>
<input type="text" id="input-5a" data-toggle="checkbox-x" value="1" readonly>
<label for="input-5b" class="cbx-label disabled">Disabled Input&nbsp;</label>
<input id="input-5b" data-toggle="checkbox-x" disabled>
<!-- note input type is text by default if not specified -->
Checkbox X control with labels. You can click on labels to change checkbox values. Note that inline alignment is set by default.
<label class="cbx-label small" for="check-1g">Left Label</label>
<input type="checkbox" id="check-1g" value="1" checked data-toggle="checkbox-x" data-size="sm">
<span style="border-left: 1px solid #ddd; margin: 0 10px;"></span>
<input type="checkbox" id="check-2g" value="0" data-toggle="checkbox-x" data-size="sm">
<label class="cbx-label small" for="check-2g">Right Label</label>
<span style="border-left: 1px solid #ddd; margin: 0 10px;"></span>
<label class="cbx-label small">Enclosing Label
<input type="checkbox" id="check-3g" value="" data-toggle="checkbox-x" data-size="sm" data-enclosed-label="true">
Allow only two states for the checkbox (1 and 0).
<label class="cbx-label" for="input-20">Status</label>
<input type="checkbox" id="input-20" data-toggle="checkbox-x" value="1" data-three-state="false">
Initialize plugin via javascript (note that you should not set data-toggle="checkbox" for this case). You can use customized HTML markup as checkbox indicators.
<label class="cbx-label" for="input-20a">Status
<input type="checkbox" id="input-20a" value="1" checked><script>$("#input-20a").checkboxX({
    enclosedLabel: true,
    iconChecked: "<b>&check;</b>",
    iconUnchecked: "<b>X</b>",


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.