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

disable (  ) 

enable (  ) 

value ( ) 

disable

Disables the component.

disable ( ) 

Return value:

Type	Description
Radio	The disabled Radio component.

Code example:

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

enable

Enables the component.

enable ( ) 

Return value:

Type	Description
Radio	The enabled Radio component.

Code example:

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

value

Sets/Gets the value from the radio 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="radio" name="radio-1" id="radio-1"/><label for="radio-1">Normal</label>
<script>
   var element = document.getElementById("radio-1"),
       radioWidget = tau.widget.Radio(element);

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