Radio Button & Checkbox

Radio Button and Checkbox (Radio and CheckBox components) are stateful controls that can be either selected or unselected. When used as standalone there is no difference in functionality between them though usually only the Checkbox is used as standalone representing simple boolean option.

Group of Checkboxes allow user to select none, one or multiple values from values represented by each Checkbox in the group. On the other hand group of Radio Buttons allows user to select only one value from values represented by each Radio Button in the group. The event change (px\controls\ControlEvent::CHANGE) is dispatched when the selected state of the control changes.

When Checkbox or Radio button is selected the property selected is set to true. Property value can contain arbitrary value and it is not changed by control itself - it is used when control is in group. To assign the control to the group set property buttonGroup to instance of ButtonGroup component or to it's name.

Button Group component can be used to link several Radio Buttons or Checkboxes to act as one control although they might be at arbitrary positions in the layout. Button Group's value property contains contents of the value property of the first selected control assigned to it or null if none is selected. Property values contains array of selected control's values. The array is empty if none is selected. The event change (px\controls\ControlEvent::CHANGE) is dispatched on the Button Group when the selected state of one of the buttons in the group changes.

syntax
elementnamespacename
Radio Buttonhttp://pexeso-php.sourceforge.net/1.0Radio
Checkboxhttp://pexeso-php.sourceforge.net/1.0CheckBox
Button Grouphttp://pexeso-php.sourceforge.net/1.0ButtonGroup

Radio Button Example

Red
Green
Blue

Source code for example above follows.

<?xml version="1.0" encoding="UTF-8"?>
<px:Component xmlns:h="http://www.w3.org/1999/xhtml"
	xmlns:px="http://pexeso-php.sourceforge.net/1.0"
	xmlns:ex="examples">
	<px:Form>
		<px:ButtonGroup name="colorComponents" change="{$self}"/>
		<px:Radio buttonGroup="colorComponents" value="red" />Red<h:br/>
		<px:Radio buttonGroup="colorComponents" value="green" />Green<h:br/>
		<px:Radio buttonGroup="colorComponents" value="blue" />Blue<h:br/>
		<h:span backgroundColor="#888" color="{$self->colorComponents->value}"
			>{$self->colorComponents->value}</h:span>
	</px:Form>
</px:Component>

Checkbox Example

Enable color components
Red
Green
Blue

Example source code

Source code of the exmaple above.

<?xml version="1.0" encoding="UTF-8"?>
<px:Component xmlns:h="http://www.w3.org/1999/xhtml"
	xmlns:px="http://pexeso-php.sourceforge.net/1.0"
	xmlns:ex="examples">
	<px:Form>
		<px:CheckBox name="colorComponentsCheck" change="{$self}"/>
			Enable color components
		<px:ButtonGroup name="colorComponents" change="{$self}"
			disabled="{!$self->colorComponentsCheck->selected}"/>
		<h:div paddingLeft="20px">
			<px:CheckBox buttonGroup="colorComponents" value="0xf00" />Red<h:br/>
			<px:CheckBox buttonGroup="colorComponents" value="0x0f0" />Green<h:br/>
			<px:CheckBox buttonGroup="colorComponents" value="0x00f" />Blue<h:br/>
		</h:div>
		<h:span backgroundColor="#888"
			rendered="{$self->colorComponentsCheck->selected}"
color="{sprintf('#%03x', array_sum(array_map('hexdec', $self->colorComponents->values)))}"
>{$self->colorComponents->values?implode(", ",
$self->colorComponents->values):'none'}</h:span>
	</px:Form>
</px:Component>