ZK Component Reference/Input/Checkbox

Checkbox

• Demonstration: Checkbox
• Java API: Checkbox
• JavaScript API: Checkbox
• Style Guide: Checkbox

Employment/Purpose

A checkbox.

Example

<window title="Checkbox demo" border="normal" width="350px">
	<checkbox id="apple" label="Apple" onCheck="doChecked()" />
	<checkbox id="orange" label="Orange" onCheck="doChecked()" />
	<checkbox id="banana" label="Banana" onCheck="doChecked()" />
	<hbox>
		You have selected :
		<label id="fruit2" />
	</hbox>
	<zscript> void doChecked() { fruit2.value = (apple.isChecked() ?
		apple.label+' ' : &quot;&quot;) 
                     + (orange.isChecked() ? orange.label+' ' : &quot;&quot;) 
                     + (banana.isChecked() ? banana.label+' ' : &quot;&quot;);
             }
         </zscript>
 </window>

Mold

[ Since 8.6.0 ]

There are two additional molds for Checkbox: switch and toggle, you can customize the mold in css by overriding class.

  <checkbox mold="switch" />
  <checkbox mold="toggle" />

switch

Default:

Customized in CSS:

.z-checkbox-switch-off > .z-checkbox-mold {
	background-color: red;
}
.z-checkbox-switch-on > .z-checkbox-mold {
	background-color: green;
}
.z-checkbox-switch-off > .z-checkbox-mold:before {
	background-color: black;
}
.z-checkbox-switch-on > .z-checkbox-mold:before {
	background-color: white;
}

toggle

Default:

Customized in CSS:

.z-checkbox-toggle-off > .z-checkbox-mold {
	background-color: red;
}
.z-checkbox-toggle-on > .z-checkbox-mold {
	background-color: green;
}

tristate

[ Since 9.0.0 ]

Allowing users to set the indeterminate state, in addition to the checked and unchecked states. The behavior when users click on the checkbox is different from the default mold, the state will switching between checked, unchecked and indeterminate.

<checkbox mold="tristate"></checkbox>

We provide a new API getState() return CHECKED, UNCHECKED or INDETERMINATE since ZK 9.0.0 .

State state = checkbox.getState() // CHECKED, UNCHECKED or INDETERMINATE

Indeterminate

[ Since 8.6.0 ]

Indeterminate is a state that is neither checked nor unchecked.

Note: changing indeterminate will not affect checked state, but changing checked will set indeterminate to false.

    <checkbox indeterminate="true"/>

Supported Events

Name	Event Type
onFocus	Event: Event Denotes when a component gets the focus.
onBlur	Event: Event Denotes when a component loses the focus.
onCheck	Event: CheckEvent Denotes when a component is checked or unchecked.

• Inherited Supported Events: LabelImageElement

Supported Children

*None

Use Cases

Version	Description	Example Location

Version History

Version	Date	Content