Clearing a selected RadioButton control in Flex

The following example shows how you can use ActionScript to clear a currently selected radio button by setting the RadioButtonGroup class’s selection property to null.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/01/06/clearing-a-selected-radiobutton-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import mx.controls.Alert;

            private function reset():void {
                answers.selection = null;
            }

            private function check():void {
                if (answers.selectedValue) {
                    Alert.show(answers.selectedValue.toString());
                } else {
                    Alert.show("unselected");
                }
            }
        ]]>
    </mx:Script>

    <mx:RadioButtonGroup id="answers" />

    <mx:Form backgroundColor="red">
        <mx:FormItem>
            <mx:Text id="question"
                    text="Question..." />
        </mx:FormItem>
        <mx:FormItem>
            <mx:RadioButton id="answer1"
                    group="{answers}"
                    label="Answer 1" />
        </mx:FormItem>
        <mx:FormItem>
            <mx:RadioButton id="answer2"
                    group="{answers}"
                    label="Answer 2" />
        </mx:FormItem>
        <mx:FormItem>
            <mx:RadioButton id="answer3"
                    group="{answers}"
                    label="Answer 3" />
        </mx:FormItem>
        <mx:FormItem>
            <mx:RadioButton id="answer4"
                    group="{answers}"
                    label="Answer 4" />
        </mx:FormItem>
        <mx:FormItem>
            <mx:RadioButton id="answer5"
                    group="{answers}"
                    label="Answer 5" />
        </mx:FormItem>
        <mx:FormItem direction="horizontal">
            <mx:Button label="Check" click="check();" />
            <mx:Button label="Reset" click="reset();" />
        </mx:FormItem>
    </mx:Form>

</mx:Application>

View source is enabled in the following example.

Tagged as: selectedValue, selection