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

Comments