Krajee
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.
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).
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).
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.
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.

 
visitors to Krajee Jquery Plugins since 22-May-2017