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.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/01/06/clearing-a-selected-radiobutton-control-in-flex/ -->
<mx:Application name="RadioButtonGroup_selection_test"
        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>

[GoogleAdsWide]

View source is enabled in the following example.

13 thoughts on “Clearing a selected RadioButton control in Flex

  1. Copied your page exactly as you’ve listed the code. Got the check to work but not the reset. Is there a setting in my browser that could prevent this code from working? Is there some other setting that could inhibit this from working?

    Thanks.

  2. Richard Scott,

    Which version/build of the Flex SDK are you using? The easiest way to find out is to look in the installed Flex SDK’s root folder for a flex-sdk-description.xml file.

    Peter

  3. Hi Peter,

    I am working with Adobe Flex Builder 2 Built on Eclipse Version 2.0.123459. Thanks for the quick response.

  4. Richard Scott,

    Unfortunately, I believe it was a bug in Flex 2 which got fixed in Flex 3. You may need to update to the newer version of the Flex SDK (or else extend the RadioButton and/or RadioButtonGroup classes and copy the relevant fixed code from Flex 3).

    Peter

  5. i want to apply this functionality in custom renderers how todo that in flex please suggest solution

  6. i tried radiobutton as item renderer but it is allowing multiple selection when data function is overridden please suggest solution

Comments are closed.