The following examples show how you can detect when the user has selected a different radio button by listening for the change event on the RadioButton control or RadioButtonGroup control.

Full code after the jump.

The first example demonstrates how you can listen for the change event on each individual radio button:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/10/19/determining-when-the-selected-radio-button-has-changed/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            private function rb_change(evt:Event):void {
                var rb:RadioButton = evt.currentTarget as RadioButton;
                lbl.text = rb.label;
            }
        ]]>
    </mx:Script>

    <mx:VBox>
        <mx:RadioButton id="rb1"
                label="One"
                change="rb_change(event);" />
        <mx:RadioButton id="rb2"
                label="Two"
                change="rb_change(event);" />
        <mx:RadioButton id="rb3"
                label="Three"
                change="rb_change(event);" />
    </mx:VBox>

    <mx:Label id="lbl" fontWeight="bold" />

</mx:Application>

View source is enabled in the following example.

The second example demonstrates how you can listen for the change event on the radio button group:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/10/19/determining-when-the-selected-radio-button-has-changed/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            private function rbg_change(evt:Event):void {
                var group:RadioButtonGroup = evt.currentTarget as RadioButtonGroup;
                lbl.text = group.selection.label;
            }
        ]]>
    </mx:Script>

    <mx:RadioButtonGroup id="rbg"
            change="rbg_change(event);" />

    <mx:VBox>
        <mx:RadioButton id="rb1"
                label="One"
                group="{rbg}" />
        <mx:RadioButton id="rb2"
                label="Two"
                group="{rbg}" />
        <mx:RadioButton id="rb3"
                label="Three"
                group="{rbg}" />
    </mx:VBox>

    <mx:Label id="lbl" fontWeight="bold" />

</mx:Application>

View source is enabled in the following example.

 
Tagged with:
 
About The Author

Peter deHaan

Peter deHaan currently works for Adobe on the Flex SDK QA team. While not working on Flex, Flash, and ColdFusion applications, Peter enjoys making up bios and writing in 3rd person. Peter's rarely updated blog can be found at blogs.adobe.com/pdehaan/, actionscriptexamples.com, airexamples.com, and coldfusionexamples.com.

2 Responses to Determining when the selected radio button has changed

  1. coco says:

    good example!

  2. lidia says:

    Hi,

    I have a problem about the return event of radio buttons. Somehow the butons at my xml (especial xml’s company, used by java that can’t program functions and only produce events), just reproduce correctly if I do double-click, not in once.

    My question is:
    Do you believe that there is some kind of actions possible to return the double click, by reproducing just one?

    here’s the code of my group radio-buttons:

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">

Anti-Spam Protection by WP-SpamFree