jQuery Databind.js Plugin Examples

Download This Plugin Back To jQueryScript

A lightweight jQuery data bindng plugin that makes it easy to bind data to elements using only HTML data attributes.

[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>
            
              <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">
            

Checkbox elements are unable to initiate this event because of their multi-selectability.

              <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">
            

[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.

              <select data-bind="field2">
  <option value=""></option>
  <option value="1">label 1</option>
  <option value="2">label 2</option>
  <option value="3">label 3</option>
</select>
            
              <input type="text" data-bind="field2">
            
              <input type="text" data-bind="field2" data-bind-option-text>
            

[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.

              <input type="checkbox" data-check-field="field3">
            
              <input type="checkbox" name="field3" value="1">
<input type="checkbox" name="field3" value="2">
<input type="checkbox" name="field3" 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="field4" checked value="check">
<button type="button" data-check-field="field4">uncheck</button>
            
              <input type="checkbox" name="field4" value="1">
<input type="checkbox" name="field4" value="2">
<input type="checkbox" name="field4" value="3">
            

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

              <input type="checkbox" data-check-field="5$">
            
              <input type="checkbox" name="field5" value="1">
<input type="checkbox" name="field5" value="2">
<input type="checkbox" name="field5" value="3">
            

[data-display]

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="field6:1">display content 1: abcd</span>
<span data-display="field6:2">display content 2: dcba</span>
            
              <input type="radio" name="field6" value="1" checked>
<input type="radio" name="field6" 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="field7:[1,3]">display content 1,3: abcd</span>
<span data-display="field7:[2]">display content 2: dcba</span>
            
              <input type="radio" name="field7" value="1" checked>
<input type="radio" name="field7" value="2">
<input type="radio" name="field7" value="3">
            

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="field8:1" data-display-hide-callback="test1">display content 1: abcd</span>
<span data-display="field8:2">display content 2: dcba</span>
            
              <input type="radio" name="field8" value="1" checked>
<input type="radio" name="field8" value="2">
            
times content1 hidden: 0
              times content1 hidden: <span id="test1Result">0</span>
function test1() {
  $("#test1Result").increase();
}
            

.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>
            
              <input type="radio" name="field9" class="display-only" value="1">
<input type="radio" name="field9" class="display-only" value="2" checked>
<input type="radio" name="field9" class="display-only" value="3">
            
              <input type="checkbox" name="field10" class="display-only" value="1">
<input type="checkbox" name="field10" class="display-only" value="2" checked>
<input type="checkbox" name="field10" 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.

              <input type="radio" name="field11" value="1">
<input type="radio" name="field11" value="2" checked>
<input type="radio" name="field11" value="3">
            
              <input type="checkbox" name="field12" value="1">
<input type="checkbox" name="field12" value="2" checked>
<input type="checkbox" name="field12" value="3" checked>
            
              $(document).ready(() => {
  $("[name='field11'], [name='field12']").readonlyCheckable();
});
            

$().boolean()

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

              <input type="text" id="field13" value="true">
            
              <input type="text" id="field14" value="123">
            
              let field13Boolean = $("#field13").boolean(); // field13Boolean = true
let field14Boolean = $("#field14").boolean(); // field14Boolean = null
            

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

              <input type="text" id="field15" value="false">
            
              <input type="text" id="field16" value="123">
            
              let field15Boolean = $("#field15").boolean(false); // field15Boolean = true
let field16Boolean = $("#field16").boolean(true); // field16Boolean = false
            

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

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


              <input type="text" id="field17">
            
              <input type="text" id="field18" value="123">
            
              let field17Empty = $("#field17").isEmpty(); // field17Empty = true
let field18Empty = $("#field18").isEmpty(); // field18Empty = false
            

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

              <input type="text" id="field19">
            
              let field19Empty = $.isEmpty($("#field19").val()); // field19Empty = true
let field20Empty = $.isEmpty('1234'); // field20Empty = 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="field21" value="test">
            
              <input type="text" id="field22" value="test">
            
              $("#field21").modify(value => 'prefix ' + value + ' suffix');
$("#field22").modify('prefix ', ' suffix');
            

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


              <input type="text" id="field23" value="1">
            
              <input type="text" id="field24" value="1">
            
              $("#field23").increase();
$("#field24").increase('-10');