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 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 Allowing users to set the indeterminate state, in addition to the checked and unchecked states. In tristate mold, when users click on the checkbox, it will switch between checked, unchecked and indeterminate states. This is different from the default mold which has only checked and unchecked states.

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

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

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

Indeterminate

since 8.6

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"/>

Display a checkbox like:

Supported Events

Name

Event Type

onFocus

Event: [org.zkoss.zk.ui.event.Event](https://www.zkoss.org/javadoc/latest/zk/org/zkoss/zk/ui/event/Event.html) Denotes when a component gets the focus.

onBlur

Event: [org.zkoss.zk.ui.event.Event](https://www.zkoss.org/javadoc/latest/zk/org/zkoss/zk/ui/event/Event.html) Denotes when a component loses the focus.

onCheck

Event: [org.zkoss.zk.ui.event.CheckEvent](https://www.zkoss.org/javadoc/latest/zk/org/zkoss/zk/ui/event/CheckEvent.html) Denotes when a component is checked or unchecked.

Supported Children

*None

Version History

Version Date Content