Recipe 14.1. Performing Actions When the User Clicks a Checkbox or Radio Button

Problem

You want your Flash application to perform some actions when the user clicks a checkbox or radio button.

Solution

Define a listener object with a click() method and register the listener with the checkbox or radio button group.

Discussion

By default, when the user clicks a checkbox or radio button, Flash doesn't take any immediate action. In many cases, that is the behavior that you want. However, it is possible to tell Flash that you want it to perform some actions when the user clicks the checkbox or radio button control. There are a variety of reasons why you may want to do that. For example, you may want a form to automatically submit its data when the user clicks the form control rather than using a button.

In order for Flash to know to do something when the user clicks the checkbox or radio button, you need to use a listener object. You can create the listener object using the Object constructor as part of a new statement and assigning the value to a variable. The following code is an example of how you can create a listener object named oListener:

	var oListener:Object = new Object();

After you've created the listener object, define a click() method for the object. Within the click() method, place the ActionScript code that you'd like Flash to run when the user clicks the form control. The following code assigns a click() method to oListener. Within the click() method is a trace() statement that will display the message "User clicked form control" when the user clicks the checkbox or radio button:

	oListener.click = function(oEvent:Object):Void {
	  trace("User clicked form control");
	};

Then you need to register the listener with the form control. If the form control is a checkbox, you should register the listener with the checkbox instance. For example, the following code registers the oListener object with a checkbox named cchEULA:

	cchEULA.addEventListener("click", oListener);

If you want to use the listener with radio buttons, you should register the listener object with the RadioButton group. For example, if you have a group of radio buttons to which you have assigned a groupname (exp 3pod.com) value of rbgMonitorResolution, you could use the following code to register oListener with the RadioButton group. All radio buttons in the group will then call the click() method when clicked:

	rbgMonitorResolution.addEventListener("click", oListener);

You may have noticed that in defining the click() method for the listener object that I have declared the method such that it expects a parameter. In the example, I called that parameter oEvent. Flash automatically passes a parameter to listener object methods that contain information about the event and the object that initiated the event. The parameter is an object that has several properties, among which is the target property. The target property is a reference to the form control that dispatched the event. Therefore, you can use that reference in order to retrieve the value from the component instance. This step is especially useful if you have a single listener object registered for several components. The following example code registers a single listener object with three checkboxes: cchCar, cchPlane, and cchTrain. When the click() method is called, it displays the name (exp 3pod.com) of the instance and the selected state for that component.

	var oListener:Object = new Object();
	oListener.click = function(oEvent:Object):Void {
	  trace(oEvent.target._name (exp 3pod.com) + " : " + oEvent.target.selected);
	};
	cchCar.addEventListener("click", oListener);
	cchPlane.addEventListener("click", oListener);
	cchTrain.addEventListener("click", oListener);

See Also

Recipe 13.4 and Recipe 13.5