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 type="checkbox" or class="ui-checkbox" are displayed as checkbox.

HTML Examples

To create a checkbox component, see the 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	The disabled 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	The enabled 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

Sets/Gets the value from checkbox element.

{ string | number } value ( ) 

Return value:

Type	Description
String | number	When the method does not have a 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);

   // Sets value to checkbox element
   checkboxWidget.value("checkbox-value");
   // Gets checked checkbox element
   console.log(checkboxWidget.value());
</script>