Checkbox X Demo

Star Fork Watch Follow

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

Initialize the plugin on a native TEXT input instead of a native checkbox

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)

Render text input within an enclosed label. This example displays a checkbox with 2-states (i.e. 0 or 1 as the values for the checkbox). Note that for the demos in this section and the next two, the output value on change will be displayed in these pages as well as in the browser console.

Click me

Value:

<div class="row">
    <div class="col-sm-3 pt-3">
        <div class="cbx-krajee">
            <label class="cbx-label" for="test-kv-94">
                <input id="test-kv-94" type="text" value="1"/>Click me
            </label>
        </div>
    </div>
    <div class="col-sm-4">
        <div class="alert alert-info">Value: <code id="kv-94"></code></div>
    </div>
</div>
<script>
$('#test-kv-94').checkboxX({threeState: false, enclosedLabel: true});
</script>

Render text input along with a non-enclosed label. This example displays a checkbox with 2-states (i.e. 0 or 1 as the values for the checkbox).

Click me

Value:

<div class="row">
    <div class="col-sm-3 pt-3">
        <div class="cbx-krajee">
            <label class="cbx-label" for="test-kv-95">Click me</label>
            <input id="test-kv-95" type="text" value="1"/>
        </div>
    </div>
    <div class="col-sm-4">
        <div class="alert alert-info">Value: <code id="kv-95"></code></div>
    </div>
</div>
</div>
<script>
$('#test-kv-95').checkboxX({threeState: false, enclosedLabel: true});
</script>

Render text input within an enclosed label. This example displays a checkbox with 3-states (i.e. 0, 1 or null as the values for the checkbox).

Click me

Value:

<div class="row">
    <div class="col-sm-3 pt-3">
        <div class="cbx-krajee">
            <label class="cbx-label" for="test-kv-96">
                <input id="test-kv-96" type="text" value="1"/>Click me
            </label>
        </div>
    </div>
    <div class="col-sm-4">
        <div class="alert alert-info">Value: <code id="kv-96"></code></div>
    </div>
</div>
<script>
$('#test-kv-96').checkboxX({threeState: true, enclosedLabel: true});
</script>

Render text input along with a non-enclosed label and 3 states.

Click me

Value:

<div class="row">
    <div class="col-sm-3 pt-3">
        <div class="cbx-krajee">
            <label class="cbx-label" for="test-kv-97">Click me</label>
            <input id="test-kv-97" type="text" checked value="1"/>        
        </div>
    </div>
    <div class="col-sm-4">
        <div class="alert alert-info">Value: <code id="kv-97"></code></div>
    </div>
</div>
<script>
$('#test-kv-97').checkboxX({threeState: true, enclosedLabel: false});
</script>

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.

Checkbox X Demo

Tip

Enclosed Label 2 state

Non Enclosed Label 2 state

Enclosed Label 3 state

Non Enclosed Label 3 state

Comments & Discussion

Note