ui:inputCheckbox | Lightning コンポーネント開発者ガイド

ui:inputCheckbox コンポーネントは、value および disabled 属性によって状態が制御されるチェックボックスを表します。checkbox 型の HTML input タグとして表示されます。ui:inputCheckbox コンポーネントからの出力を表示するには、ui:outputCheckbox コンポーネントを使用します。

次に、チェックボックスの基本設定を示します。

1<ui:inputCheckbox label="Reimbursed?"/>

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

1<div class="uiInput uiInputCheckbox uiInput--default uiInput--checkbox">
2  <label class="uiLabel-left form-element__label uiLabel">
3    <span>Reimbursed?</span>
4  </label>
5  <input type="checkbox">
6</div>

value 属性はチェックボックスの状態を制御し、click や change などのイベントはその動作を決定します。次の例は、クリックイベント時のチェックボックスの CSS クラスを更新します。

1<!-- Component Markup -->
2<ui:inputCheckbox label="Color me" click="{!c.update}"/>
3
4/** Client-Side Controller **/
5update : function (cmp, event) {
6  $A.util.toggleClass(event.getSource(), "red");
7}

次の例は、ui:inputCheckbox コンポーネントの値を取得します。

1<aura:component>
2 <aura:attribute name="myBool" type="Boolean" default="true"/>
3 <ui:inputCheckbox aura:id="checkbox" label="Select?" change="{!c.onCheck}"/>
4 <p>Selected:</p>
5 <p><ui:outputText class="result" aura:id="checkResult" value="false" /></p>
6 <p>The following checkbox uses a component attribute to bind its value.</p>
7 <ui:outputCheckbox aura:id="output" value="{!v.myBool}"/>
8</aura:component>

1({
2	 onCheck: function(cmp, evt) {
3		 var checkCmp = cmp.find("checkbox");
4		 resultCmp = cmp.find("checkResult");
5		 resultCmp.set("v.value", ""+checkCmp.get("v.value"));
6
7	 }
8})

属性

属性名	属性型	説明
`body`	Component[]	コンポーネント��ボディ。マークアップでは、これはタグのボディに含まれるすべてを指します。
`class`	String	コンポーネントに添付される CSS スタイル。このスタイルは、コンポーネントで出力される基本スタイルに追加されます。
`disabled`	Boolean	コンポーネントを無効な状態で表示するかどうかを指定します。デフォルト値は「false」です。
`errors`	List	表示するエラーのリスト。
`label`	String	コンポーネントに表示されるテキスト。
`labelClass`	String	表示ラベルコンポーネントの CSS クラス。
`name`	String	コンポーネントの名前。
`required`	Boolean	入力が必須かどうかを指定します。デフォルト値は「false」です。
`requiredIndicatorClass`	String	必須のインジケータコンポーネントの CSS クラス。
`text`	String	入力値の属性。
`updateOn`	String	処理されたイベントに updateOn 属性が設定されている場合、コンポーネントの値のバインドを更新します。デフォルト値は「change,click」です。
`value`	Boolean	オプションの状況が選択されているかどうかを示します。デフォルト値は「false」です。

イベント

イベント名	イベントタイプ	説明
`dblclick`	COMPONENT	ユーザがコンポーネントをダブルクリックすると起動されるイベント。
`mouseover`	COMPONENT	ユーザがコンポーネントにマウスポインタを重ねると起動されるイベント。
`mouseout`	COMPONENT	ユーザがコンポーネントからマウスポインタを移動すると起動されるイベント。
`mouseup`	COMPONENT	ユーザがコンポーネント上でマウスボタンを放すと起動されるイベント。
`mousemove`	COMPONENT	ユーザがコンポーネントにマウスポインタを重ねると起動されるイベント。
`click`	COMPONENT	ユーザがコンポーネントをクリックすると起動されるイベント。
`mousedown`	COMPONENT	ユーザがコンポーネント上でマウスボタンをクリックすると起動されるイベント。
`select`	COMPONENT	ユーザが何らかのテキストを選択すると起動されるイベント。
`blur`	COMPONENT	ユーザがコンポーネントから離れると起動されるイベント。
`focus`	COMPONENT	ユーザがコンポーネントにフォーカスを移動すると起動されるイベント。
`keypress`	COMPONENT	ユーザがコンポーネント上でキーボードのキーを押すまたは押したままにすると起動されるイベント。
`keyup`	COMPONENT	ユーザがコンポーネント上でキーボードのキーを放すと起動されるイベント。
`keydown`	COMPONENT	ユーザがコンポーネント上でキーボードのキーを押すと起動されるイベント。
`cut`	COMPONENT	ユーザがコンテンツをクリップボードに切り取ると起動されるイベント。
`onError`	COMPONENT	コンポーネントに検証エラーがあると起動されるイベント。
`onClearErrors`	COMPONENT	いずれかの検証エラーをクリアする必要がある場合に起動されるイベント。
`change`	COMPONENT	ユーザが入力のコンテンツを変更したときに起動されるイベント。
`copy`	COMPONENT	ユーザがコンテンツをクリップボードにコピーすると起動されるイベント。
`paste`	COMPONENT	ユーザがクリップボードからコンテンツを貼り付けると起動されるイベント。