djRadioButton - Dojo Radio Button

Accepts the value of a selected radio button.

Category

Dojo Form

Syntax

<xe:djRadioButton attributes>content</xe:djRadioButton>
Table 1. Essential properties
Property Description
id Defaults to djRadioButton1, djRadioButton2, and so on.
value Binds the control to a data element.
label Specifies text that appears with the radio button.
selectedValue Specifies the value of the button when it is selected.
groupName Associates a radio button with a group such that only one button in the group can be selected at once.
defaultValue Initially selects the radio button whose selectedValue matches this value. In a group, you should not specify more than one default value.
Table 2. All properties
Category Properties
accessibility alt, tabIndex, title, waiRole, waiState
basics binding, dir, disabled, id, immediate, label, lang, loaded, multipleSeparator, multipleTrim, readOnly, rendered, rendererType, required, showLabel, type
data converter, defaultValue, disableClientSideValidation, disableModifiedFlag, disableValidators, groupName, showReadOnlyAsDisabled, skipContainers, validator, validators, value, valueChangeListener, valueChangeListeners
dojo dojoAttributes, dojoType, dragRestriction, intermediateChanges, tooltip
events onBlur, onChange, onClick, onClose, onDblClick, onFocus, onHide, onKeyDown, onKeyPress, onKeyUp, onMouseDown, onMouseEnter, onMouseLeave, onMouseMove, onMouseOut, onMouseOver, onMouseUp, onShow
styling disableTheme, iconClass, style, styleClass, themeId

Usage

This is a Dojo control.

At run time, a radio button appears on the page. If the user selects the button, its selected value becomes the button value. A radio buttons belong to the same group, only one button in the group can be selected at once.

This control is not tested against the latest accessibility standards. The recommended accessible path is the Radio Button Group control.

Examples

This example consists of three radio buttons bound to the same scoped variable, a button for submitting the page, and a computed field that uses the value of the scoped variable. The buttons belong to a group.
<xp:table>
	<xp:tr>
		<xp:td>Radio button</xp:td>
		<xp:td>
			<xe:djRadioButton id="djRadioButton1"
				value="#{sessionScope.djRadioButton1}" label="blue"
				defaultValue="blue" selectedValue="blue" groupName="color">
			</xe:djRadioButton>
			<xe:djRadioButton id="djRadioButton2"
				value="#{sessionScope.djRadioButton1}" label="red"
				selectedValue="red" groupName="color">
			</xe:djRadioButton>
			<xe:djRadioButton id="djRadioButton3"
				value="#{sessionScope.djRadioButton1}" label="green"
				selectedValue="green" groupName="color">
			</xe:djRadioButton></xp:td>
	</xp:tr>
	<xp:tr>
		<xp:td>
			<xp:button value="submit" id="button1">
				<xp:eventHandler event="onclick" submit="true" 
refreshMode="complete" immediate="false" save="true">
			</xp:eventHandler></xp:button>
		</xp:td>
		<xp:td></xp:td>
	</xp:tr>
	<xp:tr>
		<xp:td>Value</xp:td>
		<xp:td><xp:text escape="true" id="computedField1"><xp:this.value><![CDATA[#
{javascript://return "The box is " + (sessionScope.djRadioButton1 ? "" : "not ") + "checked."
return sessionScope.djRadioButton1}]]&gt;</xp:this.value></xp:text></xp:td>
	</xp:tr>
</xp:table>