Radio Buttons

 

Radio buttons are quite easy to use in bbUI. Simply add regular <input> elements of type="radio" and you are good to go.

    <input type="radio" name="group1" checked="true" value="one" onchange="doSomething(this)" />
    <input type="radio" name="group1" value="two" onchange="doSomething(this)" />
    <input type="radio" name="group1" value="three" onchange="doSomething(this)" />

When using BlackBerry 10 styling this control will be displayed according to the UI specifications found on BlackBerry 10. If you are using a radio input on BB6/BB7/PlayBook you will get the normal "Mozilla style" radio buttons.

When BlackBerry 10 styling is applied the highlight color of the radio button will use the highlightColor provided in the toolkit init() function.

Be sure to group your radio buttons together using the name attribute so that they properly change state. Also note that any time the radio button changes (either checked=true/false) the onchange event will be fired.

JavaScript Interface

NOTE: The javascript interface is currently only supported with BlackBerry 10 Styling

A radio button can be created dynamically to be inserted into a screen that is already in the live DOM (after the ondomready event has fired for the screen). This allows you to dynamically create radio buttons on the fly based on user interaction. It is accomplished by using the bb.radio.style() function.

// Create the element just like you would in a normal screen declaration
var radio = document.createElement('input');
radio.setAttribute('type','radio');
radio.setAttribute('name', 'group1');
radio.setAttribute('value', 'foo');
radio.onclick = function() {
		alert(this.value);
	};
// Apply our styling
radio = bb.radio.style(radio);
// Insert it into the screen and update the scroller
document.getElementById('radioContainer').appendChild(radio);
// Refresh for PlayBook
bb.refresh();

A Radio Button can have its value set using the setChecked() function. Since there can only ever be one radio button selected in a group, the setChecked() function does not take any parameters, and will set the selected state of the radio button.

document.getElementById('myradio').setChecked();

The checked state can either be retrieved by examining the checked value of the radio button or by using the getChecked() function

alert(document.getElementById('myradio').checked);
alert(document.getElementById('myradio').getChecked());

When you want to dynamically show or hide your radio button you can call it's show() and hide() functions.

document.getElementById('myRadio').show();
document.getElementById('myRadio').hide();

As a convenience you can also remove your radio button from the screen by calling the remove() function.

document.getElementById('myRadio').remove();

You can disable in your radio button by adding the disabled="true" attribute. When you want to dynamically change the state of your radio button you can call it's enable() and disable() functions.

document.getElementById('myRadio').enable();
document.getElementById('myRadio').disable();

You can retrieve the enabled state by calling the isEnabled() function or checking the disabled attribute/property.

alert(document.getElementById('myRadio').disabled);
alert(document.getElementById('myRadio').isEnabled());

To enable or disable an entire group of radio buttons you can use the enableGroup() and disableGroup() functions by passing in the radio group name.

bb.radio.enableGroup('myRadioButtonGroup');
bb.radio.disableGroup('myRadioButtonGroup');