Checkbox
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+' ' : "")
+ (orange.isChecked() ? orange.label+' ' : "")
+ (banana.isChecked() ? banana.label+' ' : "");
}
</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. In tristate mode, when users click on the checkbox, it will switch between checked, unchecked and indeterminate states. This is different from the default mode which has only checked and unchecked states.
<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 the checked value, but changing checked attribute will set indeterminate to false.
<checkbox indeterminate="true"/>
Supported Events
Event: Event
Denotes when a component gets the focus. | |
Event: Event
Denotes when a component loses the focus. | |
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 |
---|---|---|