Radio Buttons

In this example, I have created 2 radio buttons which are identified as group1.

Once the button is selected, it will show you, which button has been selected.

Reference Page:

Example Demo:

Example Code:

function doGet() {

  //Create application

  var app = UiApp.createApplication().setTitle('Radio Button Demo');

  //Create a panel

  var radioPanel = app.createVerticalPanel();

  //Create Radio Buttons with group name 'group1'

  var radio1 = app.createRadioButton('group1', 'First Option').setName('First').setId('First');

  var radio2 = app.createRadioButton('group1', 'Second Option').setName('Second').setId('Second');

  var infoLabel = app.createLabel().setVisible(false).setId('statusInfo').setStyleAttribute('color', '#f00');


  //Create a Change Handler

  var handler1 = app.createServerValueChangeHandler('showstatus1');


  //Add this handler to the radio Buttons


  //Similraly for second radios...

  var handler2 = app.createServerValueChangeHandler('showstatus2');




  //Add all the buttons to the panel




  //Add the panel to the application


  //return the application

  return app;


function showstatus1(e){

  var app = UiApp.getActiveApplication();

  var radioValue = e.parameter.First;


  app.getElementById('statusInfo').setVisible(true).setText('You have selected first radio:' + radioValue);

  return app;


function showstatus2(e){

  var app = UiApp.getActiveApplication();

  var radioValue = e.parameter.Second;


  app.getElementById('statusInfo').setVisible(true).setText('You have selected second radio:' + radioValue);

  return app;