Determining when the selected radio button has changed

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 as: change, group