Checkbox

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

Note
This component is supported since Tizen 2.4.
It was renamed from CheckboxRadio component of Tizen 2.3.

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

Method Description 
Checkbox disable()

Disables the component.

 
Checkbox enable()

Enables the component.

 
{string | number} value()

Set/Return a value from checkbox element.
disable

Disables the component.

Checkbox disable()

Return value:

Type Description
Checkbox Returns Checkbox.

Code example:

HTML code:

<input type="checkbox" name="checkbox-1" id="checkbox-1"/>
<label for="checkbox-1">Normal</label>

JS code:

var element = document.getElementById("checkbox-1"),
    checkboxWidget = tau.widget.Checkbox(element);

checkboxWidget.disable();
enable

Enables the component.

Checkbox enable()

Return value:

Type Description
Checkbox Returns Checkbox.

Code example:

HTML code:

<input type="checkbox" name="checkbox-1" id="checkbox-1"/>
<label for="checkbox-1">Normal</label>

JS code:

var element = document.getElementById("checkbox-1"),
    checkboxWidget = tau.widget.Checkbox(element);

checkboxWidget.enable();
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:

HTML code:

<input type="checkbox" name="checkbox-1" id="checkbox-1"/>
<label for="checkbox-1">Normal</label>

JS code:

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());