syn.uicontrols.$checkbox

<div>
    <div>예시</div>
    <input id="chkUseYN1" type="checkbox" syn-datafield="UseYN1" value="custom value 1" checked="checked" syn-options="{textContent: '사용여부', toSynControl: false}">
    <input id="chkUseYN2" type="checkbox" syn-datafield="UseYN2" value="custom value 2" syn-options="{textContent: '사용여부', toSynControl: true}">
</div>
<hr />
<div>
    <div>기능</div>
    <input type="button" id="btnGetValue" value="getValue" syn-events="['click']" />
    <input type="button" id="btnSetValue" value="setValue" syn-events="['click']" />
    <input type="button" id="btnClear" value="clear" syn-events="['click']" />
    <input type="button" id="btnToggleValue" value="toggleValue" syn-events="['click']" />
</div>

'use strict';
let $checkbox = {
    event: {
        btnGetValue_click() {
            syn.$l.eventLog('btnGetValue_click', JSON.stringify(syn.uicontrols.$checkbox.getValue('chkUseYN1')));
        },

        btnSetValue_click() {
            // 주의: checkedValue(기본값 '1')는 controlLoad 이후 항상 정의되어 있어, setValue에 JS 불리언 true를
            // 넘기면 'TRUE'로 변환되어 checkedValue('1')와 일치하지 않아 오히려 체크가 해제됩니다.
            // 체크시키려면 checkedValue와 같은 문자열('1')을 그대로 넘겨야 합니다.
            syn.uicontrols.$checkbox.setValue('chkUseYN1', '1');
        },

        btnClear_click() {
            syn.uicontrols.$checkbox.clear('chkUseYN1');
        },

        btnToggleValue_click() {
            syn.uicontrols.$checkbox.toggleValue('chkUseYN2');
        }
    }
}