ラジオボタン

ラジオボタンは、クリックおよびアクションの実行が可能であり、グループとして表示された場合は 1 つのみ選択できます。ラジオボタンは、動作とイベントを ui:input から継承する ui:inputRadio を使用して作成できます。value および disabled 属性は、ラジオボタンの状態を制御し、click や change などのイベントはその動作を決定します。イベントは、ラジオボタンごとに別個に使用する必要があります。

メニューでラジオボタンを使用する場合は、代わりに ui:radioMenuItem を使用します。

ラジオボタンを設定するいくつかの基本的な方法を次に示します。

選択済み

ラジオボタンを選択するには、value="true" に設定します。

1<ui:inputRadio value="true" label="Select?"/>

オフの状態

1<ui:inputRadio label="Select" disabled="true"/>

前の例の結果、次の HTML になります。

1<div class="uiInput uiInputRadio uiInput--default uiInput--radio">
2    <label class="uiLabel-left form-element__label uiLabel" for="globalId"><span>Select</span></label>
3<input type="radio" id="globalId">

1<!--docsample:labelsAttribute-->
2<aura:component>
3    <aura:attribute name="stages" type="String[]" default="Any,Open,Closed,Closed,Closed Won"/>
4    <aura:iteration items="{!v.stages}" var="stage">
5        <ui:inputRadio label="{!stage}" change="{!c.doSomething}"/>
6    </aura:iteration>
7</aura:component>

1<!--The radio button-->
2    <ui:inputRadio click="{!c.showItem}" label="Show Item"/>

1/* The controller action */
2showItem : function(cmp, event) {
3    var myCmp = cmp.find('myCmp');
4    $A.util.toggleClass(myCmp, "cssClass");
5}