Checkbox X Demo

Thankful to Krajee!
to get more out of us.

Configure your own theme to style the checkboxes. The plugin includes an additional theme krajee-flatblue in addition to the default theme. To set the theme krajee-flatblue, you must load the theme-krajee-flatblue.css file after the checkbox-x.css file. Then set the theme property to krajee-flatblue.

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)

The plugin includes better and enhanced theming support since v1.5.4. In addition to the default theme styling, the plugin provides an additional theme named krajee-flatblue. This theme is based on contextual colors available within AdminLTE bootstrap template. To set a theme, you need to load the theme CSS file (in this case theme-krajee-flatblue.css) after checkbox-x.css on your page. Then you must set the theme property of the plugin to your theme name (in this case krajee-flatblue). The CSS classes for your theme should be built upon cbx-(THEMENAME), which in this case is cbx-krajee-flatblue.
Sizes
Contextual Colors
<legend>Sizes</legend>
<div class="form-group">
    <input type="checkbox" id="check-1a" value="1" data-toggle="checkbox-x" data-theme="krajee-flatblue" data-size="xs">
    <input type="checkbox" id="check-2a" value="0" data-toggle="checkbox-x" data-theme="krajee-flatblue" data-size="xs">
    <input type="checkbox" id="check-3a" value="" data-toggle="checkbox-x" data-theme="krajee-flatblue" data-size="xs">
    <label>Extra Small</label>
</div>

<div class="form-group">
    <input type="checkbox" id="check-1b" value="1" data-toggle="checkbox-x" data-theme="krajee-flatblue" data-size="sm">
    <input type="checkbox" id="check-2b" value="0" data-toggle="checkbox-x" data-theme="krajee-flatblue" data-size="sm">
    <input type="checkbox" id="check-3b" value="" data-toggle="checkbox-x" data-theme="krajee-flatblue" data-size="sm">
    <label>Small</label>    
</div>

<div class="form-group">
    <input type="checkbox" id="check-1c" value="1" data-toggle="checkbox-x" data-theme="krajee-flatblue" data-size="md">
    <input type="checkbox" id="check-2c" value="0" data-toggle="checkbox-x" data-theme="krajee-flatblue" data-size="md">
    <input type="checkbox" id="check-3c" value="" data-toggle="checkbox-x" data-theme="krajee-flatblue" data-size="md">
    <label>Medium</label>    
</div>

<div class="form-group">
    <input type="checkbox" id="check-1d" value="1" data-toggle="checkbox-x" data-theme="krajee-flatblue" data-size="lg">
    <input type="checkbox" id="check-2d" value="0" data-toggle="checkbox-x" data-theme="krajee-flatblue" data-size="lg">
    <input type="checkbox" id="check-3d" value="" data-toggle="checkbox-x" data-theme="krajee-flatblue" data-size="lg">
    <label>Large</label>    
</div>

<div class="form-group">
    <input type="checkbox" id="check-1e" value="1" data-toggle="checkbox-x" data-theme="krajee-flatblue" data-size="xl">
    <input type="checkbox" id="check-2e" value="0" data-toggle="checkbox-x" data-theme="krajee-flatblue" data-size="xl">
    <input type="checkbox" id="check-3e" value="" data-toggle="checkbox-x" data-theme="krajee-flatblue" data-size="xl">
    <label>Extra Large</label>    
</div>

<div class="form-group">
    <input type="checkbox" id="check-1f" value="1" disabled data-toggle="checkbox-x" data-theme="krajee-flatblue" data-size="xl">
    <input type="checkbox" id="check-2f" value="0" disabled data-toggle="checkbox-x" data-theme="krajee-flatblue" data-size="xl">
    <input type="checkbox" id="check-3f" value="" disabled data-toggle="checkbox-x" data-theme="krajee-flatblue" data-size="xl">
    <label>Extra Large (Disabled)</label>    
</div>
<legend>Contextual Colors</legend>
<div class="form-group has-success">
    <label class="cbx-label" for="check-1h">Success</label>
    <input id="check-1h" type="checkbox" value="1" data-toggle="checkbox-x" data-theme="krajee-flatblue" data-size="xl">
</div>

<div class="form-group has-warning">
    <label class="cbx-label" for="check-2h">Warning</label>
    <input id="check-2h" value="1" data-toggle="checkbox-x" data-theme="krajee-flatblue" data-size="xl">
</div>

<div class="form-group has-error">
    <label class="cbx-label" for="check-3h">Danger</label>
    <input id="check-3h" value="1" data-toggle="checkbox-x" data-theme="krajee-flatblue" data-size="xl">
</div>

<div class="form-group">
    <label class="cbx-label" for="check-4h">Default</label>
    <input id="check-4h" value="1" data-toggle="checkbox-x" data-theme="krajee-flatblue" data-size="xl">
</div>
For the default style - do not include any theme.
Sizes
Contextual Colors
<legend>Sizes</legend>
<div class="form-group">
    <input type="checkbox" id="check-def-1a" value="1" data-toggle="checkbox-x" data-size="xs">
    <input type="checkbox" id="check-def-2a" value="0" data-toggle="checkbox-x" data-size="xs">
    <input type="checkbox" id="check-def-3a" value="" data-toggle="checkbox-x" data-size="xs">
    <label>Extra Small</label>
</div>

<div class="form-group">
    <input type="checkbox" id="check-def-1b" value="1" data-toggle="checkbox-x" data-size="sm">
    <input type="checkbox" id="check-def-2b" value="0" data-toggle="checkbox-x" data-size="sm">
    <input type="checkbox" id="check-def-3b" value="" data-toggle="checkbox-x" data-size="sm">
    <label>Small</label>    
</div>

<div class="form-group">
    <input type="checkbox" id="check-def-1c" value="1" data-toggle="checkbox-x" data-size="md">
    <input type="checkbox" id="check-def-2c" value="0" data-toggle="checkbox-x" data-size="md">
    <input type="checkbox" id="check-def-3c" value="" data-toggle="checkbox-x" data-size="md">
    <label>Medium</label>    
</div>

<div class="form-group">
    <input type="checkbox" id="check-def-1d" value="1" data-toggle="checkbox-x" data-size="lg">
    <input type="checkbox" id="check-def-2d" value="0" data-toggle="checkbox-x" data-size="lg">
    <input type="checkbox" id="check-def-3d" value="" data-toggle="checkbox-x" data-size="lg">
    <label>Large</label>    
</div>

<div class="form-group">
    <input type="checkbox" id="check-def-1e" value="1" data-toggle="checkbox-x" data-size="xl">
    <input type="checkbox" id="check-def-2e" value="0" data-toggle="checkbox-x" data-size="xl">
    <input type="checkbox" id="check-def-3e" value="" data-toggle="checkbox-x" data-size="xl">
    <label>Extra Large</label>    
</div>

<div class="form-group">
    <input type="checkbox" id="check-1f" value="1" disabled data-toggle="checkbox-x" data-size="xl">
    <input type="checkbox" id="check-2f" value="0" disabled data-toggle="checkbox-x" data-size="xl">
    <input type="checkbox" id="check-3f" value="" disabled data-toggle="checkbox-x" data-size="xl">
    <label>Extra Large (Disabled)</label>    
</div>
<legend>Contextual Colors</legend>
<div class="form-group has-success">
    <label class="cbx-label" for="check-1h">Success</label>
    <input id="check-1h" type="checkbox" value="1" data-toggle="checkbox-x" data-size="xl">
</div>

<div class="form-group has-warning">
    <label class="cbx-label" for="check-2h">Warning</label>
    <input id="check-2h" value="1" data-toggle="checkbox-x" data-size="xl">
</div>

<div class="form-group has-error">
    <label class="cbx-label" for="check-3h">Danger</label>
    <input id="check-3h" value="1" data-toggle="checkbox-x" data-size="xl">
</div>

<div class="form-group">
    <label class="cbx-label" for="check-4h">Default</label>
    <input id="check-4h" value="1" data-toggle="checkbox-x" data-size="xl">
</div>

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.