PreviousNext

Using the CheckBox component

A check box is a fundamental part of any form or web application. You can use check boxes wherever you need to gather a set of true or false values that aren't mutually exclusive. For example, a form collecting personal information about a customer could have a list of hobbies for the customer to select; each hobby would have a check box beside it.

CheckBox parameters

The following are authoring parameters that you can set for each CheckBox component instance in the Property inspector or in the Component Inspector panel:

label sets the value of the text on the check box; the default value is defaultValue.

selected sets the initial value of the check box to checked (true) or unchecked (false).

labelPlacement orients the label text on the check box. This parameter can be one of four values: left, right, top, or bottom; the default value is right. For more information, see CheckBox.labelPlacement.

You can write ActionScript to control these and additional options for CheckBox components using its properties, methods, and events. For more information, see CheckBox class.

Creating an application with the CheckBox component

The following procedure explains how to add a CheckBox component to an application while authoring. The following example is a form for an online dating application. The form is a query that searches for possible dating matches for the customer. The query form must have a check box labeled "Restrict Age" permitting the customer to restrict his or her search to a specified age group. When the "Restrict Age" check box is selected, the customer can then enter the minimum and maximum ages into two text fields that are enabled only when "Restrict Age" is selected.

To create an application with the CheckBox component, do the following:

  1. Drag two TextInput components from the Components panel to the Stage.
  2. In the Property inspector, enter the instance names minimumAge and maximumAge.
  3. Drag a CheckBox component from the Components panel to the Stage.
  4. In the Property inspector, do the following:
    • Enter restrictAge for the instance name.
    • Enter Restrict Age for the label parameter.
  5. Select Frame 1 in the Timeline, open the Actions panel, and enter the following code: 
    restrictAgeListener = new Object();
restrictAgeListener.click = function (evt){
  minimumAge.enabled = evt.target.selected;
  maximumAge.enabled = evt.target.selected;
}
restrictAge.addEventListener("click", restrictAgeListener);

    This code creates a click event handler that enables and disables the minimumAge and maximumAge text field components, that have already been placed on Stage. For more information about the click event, see CheckBox.click. For more information about the TextInput component, see TextInput component.

PreviousNext