jQuery Databind.js Plugin Examples

[data-bind]

Add the attribute [data-bind="[$fieldName]"] to most kinds of elements to enable automatic configuration.

                            <input type="text" data-bind="field1">

                            <textarea data-bind="field1"></textarea>

                            <span data-bind="field1"></span>

                            <select data-bind="field1">
    <option value=""></option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>

1 2 3

                            <input type="radio" name="field1-radio" value="1" data-bind="field1">
<input type="radio" name="field1-radio" value="2" data-bind="field1">
<input type="radio" name="field1-radio" value="3" data-bind="field1">

[data-bind-checkbox-text]

Checkbox elements are unable to initiate this event because of their multi-selectability, unless with [data-bind-checkbox-text="[$value]"] property.

1 2 3

                            <input type="checkbox" name="field1-checkbox" value="1" data-bind="field1">
<input type="checkbox" name="field1-checkbox" value="2" data-bind="field1">
<input type="checkbox" name="field1-checkbox" value="3" data-bind="field1">

1

                            <input type="checkbox" name="field2-checkbox" value="1" data-bind="field2" data-bind-checkbox-text="checked">
<input type="text" data-bind="field2">

[data-bind-option-text]

Add the attribute [data-bind-option-text] to bind the option text of the other source in group instead of its exact value to this DOM element.
　You can also use a specified element property as binding text using [data-bind-option-text="[$propertyName]"].

                            <select data-bind="field3">
    <option value=""></option>
    <option value="1" data-display-content="display content 1">label 1</option>
    <option value="2" data-display-content="display content 2">label 2</option>
    <option value="3" data-display-content="display content 3">label 3</option>
</select>

                            <input type="text" data-bind="field3">

                            <input type="text" data-bind="field3" data-bind-option-text>

                            <input type="text" data-bind="field3" data-bind-option-text="data-display-content">

[data-check-field]

Add the attribute [data-check-field="[$name]"] to a button or a checkbox element to control the check status of a set of checkboxes.

control

                            <input type="checkbox" data-check-field="field4">

1 2 3

                            <input type="checkbox" name="field4" value="1">
<input type="checkbox" name="field4" value="2">
<input type="checkbox" name="field4" value="3">

Add the attribute [checked] to specify the check action when using a button as the controlling element.

                            <input type="button" data-check-field="field5" checked value="check">
<button type="button" data-check-field="field5">uncheck</button>

1 2 3

                            <input type="checkbox" name="field5" value="1">
<input type="checkbox" name="field5" value="2">
<input type="checkbox" name="field5" value="3">

Support [*], [^] and [$] characters for a more flexible way to specify the name of the target checkboxes.

control

                            <input type="checkbox" data-check-field="5$">

1 2 3

                            <input type="checkbox" name="field6" value="1">
<input type="checkbox" name="field6" value="2">
<input type="checkbox" name="field6" value="3">

[data-display] / [data-hide]

Add the attribute [data-display="[$name]:[$value]"] to a DOM element to control its display status according to the value of the specified DOM elements.
　This function does not support fuzzy match as the function [data-check-field].

display content 1: abcd display content 2: dcba

                            <span data-display="field7:1">display content 1: abcd</span>
<span data-display="field7:2">display content 2: dcba</span>

1 2

                            <input type="radio" name="field7" value="1" checked>
<input type="radio" name="field7" value="2">

Use the attribute [data-hide="[$name]:[$value]"] to do the opposite.
　Notice that if both exist, display is executed in preference to hide.

hide content 1: abcd hide content 2: dcba

                            <span data-hide="field8:1">hide content 1: abcd</span>
<span data-display="field8:1 data-hide="field8:1">hide content 2: dcba</span>

1 2

                            <input type="radio" name="field8" value="1" checked>
<input type="radio" name="field8" value="2">

This attribute supports multiple target values in the format of [data-display="[$name]:[[$value1],[$value2]]"].

display content 1,3: abcd display content 2: dcba

                            <span data-display="field9:[1,3]">display content 1,3: abcd</span>
<span data-display="field9:[2]">display content 2: dcba</span>

1 2 3

                            <input type="radio" name="field9" value="1" checked>
<input type="radio" name="field9" value="2">
<input type="radio" name="field9" value="3">

[data-display-hide-callback]

Add the attribute [data-display-hide-callback="[$functionName]"] to invoke the specified function as a callback when the DOM element is hidden.

display content 1: abcd display content 2: dcba

                            <span data-display="field10:1" data-display-hide-callback="test1">display content 1: abcd</span>
<span data-display="field10:2">display content 2: dcba</span>

1 2

                            <input type="radio" name="field10" value="1" checked>
<input type="radio" name="field10" value="2">

times content1 hidden: 0

                            times content1 hidden: <span id="test1Result">0</span>
function test1() {
    $("#test1Result").increase();
}

[data-enable] / [data-disable]

Add the attribute [data-enable="$name:$value"] or [data-disable="$name:$value"] to do similar as display and hide event, but only affect [disabled] property instead of display status.

                            <input type="text" data-enable="field11:1">

1 2

                            <input type="radio" name="field11" value="1" checked>
<input type="radio" name="field11" value="2">

                            <input type="text" data-disable="field12:1">

1 2

                            <input type="radio" name="field12" value="1" checked>
<input type="radio" name="field12" value="2">

[data-unchecked-value]

Add the attribute [data-unchecked-value="$value"] to submit a default value when a checkbox element is not checked instead of submitting nothing.

1

                            <input type="checkbox" name="field29-checkbox1" value="1" checked data-unchecked-value="0">

submitting value: 1

.display-only

Add the class "display-only" to an input or select element to display its content as a read-only span element that is not editable and not visible.

                            <input type="text" class="display-only" value="display-only input">

                            <select class="display-only">
    <option value=""></option>
    <option value="1" selected>label 1</option>
    <option value="2">label 2</option>
    <option value="3">label 3</option>
</select>

1 2 3

                            <input type="radio" name="field13" class="display-only" value="1">
<input type="radio" name="field13" class="display-only" value="2" checked>
<input type="radio" name="field13" class="display-only" value="3">

1 2 3

                            <input type="checkbox" name="field14" class="display-only" value="1">
<input type="checkbox" name="field14" class="display-only" value="2" checked>
<input type="checkbox" name="field14" class="display-only" value="3" checked>

$().readonlyCheckable()

If checkbox or radio elements are unmodifiable in HTML for some reason, invoke $([$selector]).readonlyCheckable() to make them unselectable via js code.
　Notice that they are just unable to be selected instead of having a [readonly] or [disabled] attribute.

1 2 3

                            <input type="radio" name="field15" value="1">
<input type="radio" name="field15" value="2" checked>
<input type="radio" name="field15" value="3">

1 2 3

                            <input type="checkbox" name="field16" value="1">
<input type="checkbox" name="field16" value="2" checked>
<input type="checkbox" name="field16" value="3" checked>

                            $(document).ready(() => {
    $("[name='field15'], [name='field16']").readonlyCheckable();
});

$().boolean()

Invoke $([$selector]).boolean() to evaluate the boolean value of an element. Returns null if it is unparseable.

                            <input type="text" id="field17" value="true">

                            <input type="text" id="field18" value="123">

                            let field17Boolean = $("#field17").boolean(); // field17Boolean = true
let field18Boolean = $("#field18").boolean(); // field18Boolean = null

A boolean test value can be passed in when evaluate whether the element reserves the target boolean value.

                            <input type="text" id="field19" value="false">

                            <input type="text" id="field20" value="123">

                            let field19Boolean = $("#field19").boolean(false); // field19Boolean = true
let field20Boolean = $("#field20").boolean(true); // field20Boolean = false

$().isBlank() / $.isBlank()

Invoke $([$selector]).isBlank() to evaluate whether the value of the target dom is undefined, null or blank.

                            <input type="text" id="field21">

                            <input type="text" id="field22" value="123">

                            let field21Blank = $("#field21").isBlank(); // field21Blank = true
let field22Blank = $("#field22").isBlank(); // field22Blank = false

Invoke $.isBlank() to evaluate whether parameter is undefined, null or blank.

                            <input type="text" id="field23">

                            let field23Blank = $.isBlank($("#field23").val()); // field23Blank = true
let field24Blank = $.isBlank('1234'); // field24Blank = false

$().modify() / $().increase()

Invoke $([$selector]).modify([$function]) or $([$selector]).modify([$prependString], [$appendString]) to to quickly modify the value or text of the target element.

                            <input type="text" id="field25" value="test">

                            <input type="text" id="field26" value="test">

                            $("#field25").modify(value => 'prefix ' + value + ' suffix');
$("#field26").modify('prefix ', ' suffix');

Invoke $([$selector]).increase() or $([$selector]).increase([$increaseValue]) to to quickly modify the numeric value or text of the target element.

                            <input type="text" id="field27" value="1">

                            <input type="text" id="field28" value="1">

                            $("#field27").increase();
$("#field28").increase('-10');