RadioButton コントロールを使用すると、相互に排他的な選択肢の中から 1 つだけをユーザーに選択させることができます。RadioButton グループは、同じグループ名を持つ複数の RadioButton コントロールで構成されます。グループ内のメンバーは一度に 1 つしか選択できません。まだ選択されていないラジオボタンを選択すると、同じグループ内でそれまで選択されていたラジオボタンは選択解除されます。

RadioButton コントロールについて

次の例は、3 つの RadioButton コントロールから成る RadioButton グループを示しています。

この例を生成するために使用されたコードについては、RadioButton コントロールの作成を参照してください。

RadioButton コントロールの作成

RadioButton コントロールは、次の例に示すように、<mx:RadioButton> タグを使用して MXML 内で定義します。MXML で他の場所（別のタグ内または ActionScript ブロック内）にあるコンポーネントを参照する場合は、id 値を指定します。

<?xml version="1.0"?>
<!-- controls\button\RBSimple.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:RadioButton groupName="cardtype" 
        id="americanExpress"
        label="American Express" 
        width="150"/>
    <mx:RadioButton groupName="cardtype" 
        id="masterCard"
        label="MasterCard" 
        width="150"/>
    <mx:RadioButton groupName="cardtype" 
        id="visa"
        label="Visa" 
        width="150"/>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

このコードから、RadioButton コントロールについてに示したアプリケーションができます。

グループ内の RadioButton コントロールごとに、ボタンの click イベントに反応するイベントリスナーを定義することもできます。次のコード例では、ユーザーが RadioButton コントロールを選択すると、対応する click イベントのイベントリスナーが呼び出されます。

<?xml version="1.0"?>
<!-- controls\button\RBEvent.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:Script>
        <![CDATA[   

            import flash.events.Event;

            private function handleAmEx(event:Event):void {
                // Handle event.
                myTA.text="Got Amex";
            }

            private function handleMC(event:Event):void {
                // Handle event.
                myTA.text="Got Amex";
            }

            private function handleVisa(event:Event):void {
                // Handle event.
                myTA.text="Got Amex";
            }
        ]]>
    </mx:Script>

    <mx:RadioButton groupName="cardtype" 
        id="americanExpress"
        label="American Express" 
        width="150" 
        click="handleAmEx(event);"/>
    <mx:RadioButton groupName="cardtype" 
        id="masterCard"
        label="MasterCard" 
        width="150" 
        click="handleMC(event);"/>
    <mx:RadioButton groupName="cardtype" 
        id="visa"
        label="Visa" 
        width="150" 
        click="handleVisa(event);"/>
        
    <mx:TextArea id="myTA"/>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

RadioButton のユーザーの操作

RadioButton コントロールが有効な場合、選択されていない RadioButton コントロール上にマウスポインタを移動すると、そのボタンがロールオーバー状態であることを示す外観に変わります。選択されていない RadioButton コントロールをクリックすると、そのコントロールに入力フォーカスが移動し、非選択のダウン状態を示す外観に変わります。マウスボタンを離すと、ボタンの外観が選択状態に変わります。同じグループ内でそれまで選択されていた RadioButton コントロールは非選択状態の外観に戻ります。

マウスポインタを押し下げたまま RadioButton コントロールの範囲外に移動すると、Button コントロールは非選択状態に戻ります。入力フォーカスは維持されます。

RadioButton コントロールが無効にされている場合は、ユーザーの操作に関係なく、RadioButton コントロールおよび RadioButton グループが無効状態の外観で表示されます。無効状態では、マウスやキーボードのすべての操作が無視されます。

RadioButton コントロールおよび RadioButtonGroup コントロールでは、次のキーボード操作ができます。

<mx:RadioButtonGroup> タグを使用したグループの作成

前の例では、各 RadioButton コントロールの groupName プロパティを使用して RadioButton グループを作成しました。次の例に示すように、RadioButtonGroup コントロールを使って RadioButton グループを作成することもできます。

<?xml version="1.0"?>
<!-- controls\button\RBGroupSimple.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:Script>
        <![CDATA[   

            import mx.events.ItemClickEvent;
    
            private function handleCard(event:ItemClickEvent):void {
                //Handle event.
            }
        ]]>
    </mx:Script>

    <mx:RadioButtonGroup id="cardtype" itemClick="handleCard(event);"/>
    <mx:RadioButton groupName="cardtype" 
        id="americanExpress" 
        value="AmEx" 
        label="American Express" 
        width="150"/>
    <mx:RadioButton groupName="cardtype" 
        id="masterCard" 
        value="MC" 
        label="MasterCard" 
        width="150"/>
    <mx:RadioButton groupName="cardtype" 
        id="visa" 
        value="Visa" 
        label="Visa" 
        width="150"/>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

この例では、<mx:RadioButtonGroup> タグの id プロパティを使用して、グループ内のすべてのボタンに対してグループ名と itemClick イベントリスナーを 1 つ定義しています。<mx:RadioButtonGroup> タグを使用する場合は、id プロパティが必要です。次の例のように、グループに対して itemClick イベントリスナーを指定することにより、選択されたボタンを判別することができます。

<?xml version="1.0"?>
<!-- controls\button\RBGroupEvent.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:Script>
        <![CDATA[   

            import mx.controls.Alert;
            import mx.events.ItemClickEvent;
    
            private function handleCard(event:ItemClickEvent):void {
                if (event.currentTarget.selectedValue == "AmEx") {
                    Alert.show("You selected American Express") 
                } 
                else {
                    if (event.currentTarget.selectedValue == "MC") {
                        Alert.show("You selected Master Card") 
                    } 
                    else {
                        Alert.show("You selected Visa") 
                    }
                } 
            }
        ]]>
    </mx:Script>
    
    <mx:RadioButtonGroup id="cardtype" itemClick="handleCard(event);"/>
    <mx:RadioButton groupName="cardtype" 
        id="americanExpress" 
        value="AmEx" 
        label="American Express" 
        width="150"/>
    <mx:RadioButton groupName="cardtype" 
        id="masterCard" 
        value="MC" 
        label="MasterCard" 
        width="150"/>
    <mx:RadioButton groupName="cardtype" 
        id="visa" 
        value="Visa" 
        label="Visa" 
        width="150"/>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

「American Express」ボタンをクリックすると次のようになります。

itemClick イベントリスナーの中でイベントオブジェクトを使用しています。RadioButtonGroup コントロールの selectedValue プロパティには、選択された RadioButton コントロールの value プロパティが設定されます。value プロパティを省略した場合、selectedValue プロパティには、label プロパティの値が設定されます。

click イベントリスナーは、グループに対して定義した上で、さらに、個々のボタンに対して定義することもできます。