Radio

The Radio component changes theme of browser-default radio buttons 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="radio" or class="ui-radio" are displayed as radio button.

HTML Examples

To create a radio component, please refer following example:

<input type="radio" name="radio-choice" id="radio-choice-1" value="choice-1" checked="checked"/>
<label for="radio-choice-1">Cat</label>
<input type="radio" name="radio-choice" id="radio-choice-2" value="choice-2"/>
<label for="radio-choice-2">Dog</label>

Methods

Summary

Radio disable() 

Radio enable() 

{string | number} value() 

disable

Disables the component.

Radio disable() 

Return value:

Type	Description
Radio	Returns Radio.

Code example:

HTML code:

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

JS code:

var element = document.getElementById("radio-1"),
    radioWidget = tau.widget.Radio(element);
radioWidget.disable();

enable

Enables the component.

Radio enable() 

Return value:

Type	Description
Radio	Returns Radio.

Code example:

HTML code:

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

JS code:

var element = document.getElementById("radio-1"),
    radioWidget = tau.widget.Radio(element);
radioWidget.enable();

value

Set/Return a value from radio 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="radio" name="radio-1" id="radio-1"/>
<label for="radio-1">Normal</label>

JS code:

var element = document.getElementById("radio-1"),
    radioWidget = tau.widget.Radio(element);

/* Set value to radio element */
radioWidget.value("radio-value");
/* Return checked radio element */
console.log(radioWidget.value());