lightning:checkboxGroup

lightning:checkboxGroup コンポーネントは、単一または複数のオプションの選択を有効にするチェックボックスグループを表します。

required 属性が true に設定されている場合、1 つ以上のチェックボックスを選択する必要があります。ユーザがチェックボックスグループを操作して選択しないと、エラーメッセージが表示されます。messageWhenValueMissing 属性を使用して、カスタムエラーメッセージを提供できます。

disabled 属性が true に設定されている場合、チェックボックスの選択は変更できません。

このコンポーネントは、Lightning Design System のチェックボックスからスタイル設定を継承します。

次の例では、2 つのオプションがあり、option1 がデフォルトで選択されているチェックボックスグループを作成します。required 属性が true になっているので 1 つ以上のチェックボックスを選択する必要があります。

1<aura:component>
2    <aura:attribute name="options" type="List" default="[
3    {'label': 'Ross', 'value': 'option1'},
4    {'label': 'Rachel', 'value': 'option2'},
5    ]"/>
6    <aura:attribute name="value" type="List" default="option1"/>
7    <lightning:checkboxGroup
8        aura:id="mygroup"
9        name="checkboxGroup"
10        label="Checkbox Group"
11        options="{! v.options }"
12        value="{! v.value }"
13        onchange="{! c.handleChange }"
14        required="true" />
15</aura:component>

cmp.find("mygroup").get("v.value") を使用して、どの値が選択されているのかを確認できます。チェックボックスがオンまたはオフになったときに値を取得するには、onchange イベントハンドラを使用して event.getParam("value") をコールします。

1({
2    handleChange: function (cmp, event) {
3        var changeValue = event.getParam("value");
4        alert(changeValue);
5    }
6});

使用上の考慮事項

lightning:checkboxGroup は、一連のチェックボックスをグループ化するのに便利です。チェックボックスが 1 つの場合、代わりに lightning:input type="checkbox" を使用します。

アクセシビリティ

チェックボックスグループは、legend 要素が含まれる fieldset 要素内でネストされます。legend には label 値が含まれます。fieldset 要素では、関連するチェックボックスをグループ化して、タブおよび音声のナビゲーションを促進し、アクセシビリティに対応できます。同様に、legend 要素では、キャプションを fieldset に割り当てられるようにしてアクセシビリティを改善します。

メソッド

このコンポーネントは、次のメソッドをサポートします。

checkValidity(): チェックボックスグループに有効性エラーがあるかどうかを示す ValidityState オブジェクトの有効なプロパティ値 (Boolean) を返します。

属性