Checkbox

The Checkbox component changes theme of browser-default checkboxes to a form more adapted to the mobile environment.

Table of Contents

1. Default Selectors
2. HTML Examples
3. Methods

Default Selectors

By default, all <input> elements with the type="checkbox" or class="ui-checkbox" are displayed as checkbox.

HTML Examples

To create a checkbox component, please refer following example:

<input type="checkbox" name="checkbox-1" id="checkbox-1"/>
<label for="checkbox-1">Apple</label>
<input type="checkbox" name="checkbox-2" id="checkbox-2" checked="checked"/>
<label for="checkbox-2">Banana</label>

Methods

Summary

disable() 

enable() 

value() 

disable

Disables the component.

disable() 

Return value:

Type	Description
Checkbox	Returns Checkbox.

Code example:

<input type="checkbox" name="checkbox-1" id="checkbox-1"/>
<label for="checkbox-1">Normal</label>
<script>
   var element = document.getElementById("checkbox-1"),
       checkboxWidget = tau.widget.Checkbox(element);
   checkboxWidget.disable();
</script>

enable

Enables the component.

enable() 

Return value:

Type	Description
Checkbox	Returns Checkbox.

Code example:

<input type="checkbox" name="checkbox-1" id="checkbox-1"/>
<label for="checkbox-1">Normal</label>
<script>
   var element = document.getElementById("checkbox-1"),
       checkboxWidget = tau.widget.Checkbox(element);
   checkboxWidget.enable();
</script>

value

Set/Return a value from checkbox element.

{string | number} value() 

Return value:

Type	Description
String | number	When method do not have value parameter, it returns value of element.

Code example:

<input type="checkbox" name="checkbox-1" id="checkbox-1"/>
<label for="checkbox-1">Normal</label>
<script>
   var element = document.getElementById("checkbox-1"),
       checkboxWidget = tau.widget.Checkbox(element);

   /* Set value to checkbox element */
   checkboxWidget.value("checkbox-value");
   /* Return checked checkbox element */
   console.log(checkboxWidget.value());
</script>