checkBox - Check Box

Displays a box that can be selected or cleared.

Category

Core Controls

Syntax

<xp:checkBox attributes>content</xp:checkBox>
Table 1. Essential properties
Property Description
id Defaults to checkBox1, checkBox2, and so on.
text Provides a label.
value Binds the control to a data element or other value.
checkedValue Specifies the data value when the box is selected. Defaults to the string true.
uncheckedValue Specifies the data value when the box is cleared. Defaults to the string false.
defaultChecked Specify true to select the box by default.
Table 2. All properties
Category Properties
accessibility accesskey, role, tabindex, title
basics attrs, binding, dir, disabled, id, immediate, lang, loaded, readonly, rendered, rendererType, required, text
data checkedValue, converter, defaultChecked, disableModifiedFlag, uncheckedValue, validator, validators, value, valueChangeListener, valueChangeListeners
dojo dojoAttributes, dojoType
events onblur, onchange, onclick, ondblclick, onfocus, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup
styling disableTheme, style, styleClass, themeId

Usage

At run time, a check box appears on the page. The user can select or clear it. A check mark appears in the box when selected.

For accessibility compliance, a label must follow the check box. You can do this by specifying the text property or by placing a Label control after the check box. The label must not precede the check box.

Examples

This Check Box control assigns a data value depending on whether the box is selected (default) or cleared.
<xp:checkBox id="checkBox2" text="Use user name instead of Anonymous"
	defaultChecked="true" value="#{document1.loginname}" uncheckedValue="Anonymous"
	checkedValue="#{javascript:session.getUserName()}">
</xp:checkBox>
This Check Box control is bound to a request variable named phonesame. A script runs if the box is changed. The script sets the value of the phonenight control (an edit box) equal to the phoneday control if the check box is selected.
<xp:checkBox text="Night phone same as day" id="checkBox1"
	value="#{requestScope.phonesame}">
	<xp:eventHandler event="onchange" submit="true" 	refreshMode="complete">
		<xp:this.action><![CDATA[#{javascript:
			if(requestScope.phonesame == "true") {
				getComponent("phonenight").setValue(
					getComponent("phoneday").getValue());
			}
		}]]></xp:this.action>
	</xp:eventHandler>
</xp:checkBox>