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:

• http://code.google.com/googleapps/appsscript/class_radiobutton.html

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

  handler1.addCallbackElement(radioPanel);

  //Add this handler to the radio Buttons

  radio1.addValueChangeHandler(handler1);

  //Similraly for second radios...

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

  handler2.addCallbackElement(radioPanel);

  radio2.addValueChangeHandler(handler2);

  //Add all the buttons to the panel

  radioPanel.add(radio1)

    .add(radio2)

    .add(infoLabel);

  //Add the panel to the application

  app.add(radioPanel);

  //return the application

  return app;

}

function showstatus1(e){

  var app = UiApp.getActiveApplication();

  var radioValue = e.parameter.First;

  app.getElementById('Second').setValue(false);

  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('First').setValue(false);

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

  return app;

}