체크박스 기본 가이드

체크박스 컴포넌트 기본 기능에 대한 예시화면이다.

체크박스 컴포넌트는 체크(선택)/해제(미선택) 2가지 상태 및 상태별 값을 제공한다.

관련 속성으로는 default_check, true_value, false_value가 있다.

관련 이벤트로는 on_itemchange, on_click이 있다.

관련 API로는 getcheck, setcheck가 있다.

템플릿 위치: /HTML5/COMPONENT/CHECKBOX/checkbox_basic

템플릿 파일

• checkbox_basic.xml
• checkbox_basic.js
• 새창으로 실행

/**
 * 체크박스 체크 상태 변경 이벤트
 *
 * @param {Object} objInst 체크박스 컴포넌트 인스턴스
 * @param {number} prev_value 변경전 아이템 인덱스
 * @param {number} curr_value 변경후 아이템 인덱스
 * @param {number} event_type 체크박스 이벤트 타입
 */
function chk_basic_on_itemchange(objInst, prev_value, curr_value, event_type)
{
	factory.consoleprint("on_itemchange> CheckBox Name = " + objInst.getname());
	factory.consoleprint("on_itemchange> prev_value = " + prev_value);
	factory.consoleprint("on_itemchange> curr_value = " + curr_value);
	factory.consoleprint("on_itemchange> event_type = " + event_type);
}

/**
 * 체크박스 마우스 클릭 이벤트
 *
 * @param {Object} objInst 체크박스 컴포넌트 인스턴스
 */
function chk_basic_on_click(objInst)
{
	factory.consoleprint("on_click> Start");
	factory.consoleprint("on_click> CheckBox Object Name = " + objInst.getname());
}

function screen_on_load()
{
	this.cbo_settext.addstring(this.chk_basic.getfalsevalue() + ":" + "false_value 속성값");
	this.cbo_settext.addstring(this.chk_basic.gettruevalue() + ":" + "true_value 속성값");
	this.cbo_settext.setselectedindex(0);
}

// "getcheck" 버튼 이벤트
function btn_getcheck_on_click(objInst)
{
	// 체크박스 체크 상태 표시
	screen.alert("check = " + this.chk_basic.getcheck());
}

// "setcheck" 버튼 이벤트
function btn_setcheck_on_click(objInst)
{
	// 체크박스 체크 상태 토글처리
	this.chk_basic.setcheck(!this.chk_basic.getcheck());
}

// "gettext" 버튼 이벤트
function btn_gettext_on_click(objInst)
{
	var checkbox_value;

	// 체크박스 체크 상태 기준 내부 데이터 값(true_value/false_value 속성값)을 표시
	checkbox_value = this.chk_basic.gettext();
	this.fld_gettext.settext(checkbox_value);
}

// "settext" 버튼 이벤트
function btn_settext_on_click(objInst)
{
	var checkbox_value;

	// 체크박스 데이터 값(true_value/false_value 속성값) 설정
	checkbox_value = this.cbo_settext.getselectedcode();
	this.chk_basic.settext(checkbox_value);
}

// "getcaption" 버튼 이벤트
function btn_getcaption_on_click(objInst)
{
	// 체크박스 캡션(text 속성)을 가져와 필드에 설정
	this.fld_getcaption.settext(this.chk_basic.getcaption());
}

// "setcaption" 버튼 이벤트
function btn_setcaption_on_click(objInst)
{
	// 체크박스 캡션(text 속성) 설정
	this.chk_basic.setcaption(this.fld_setcaption.gettext());
}