#GWC UI Library : CheckBox

웹 UI 라이브러리인 GWC에서 제공하는 CheckBox 컴포넌트에 대한 예제 코드입니다.

먼저 DOM 구성은 다음과 같습니다.

<gwc-label id="label" content="CheckBox 상태 이벤트 정보" outline-type="concave"></gwc-label>

<div>

<gwc-checkbox id="checkbox1" label="인간은" checked="true" tooltip="툴팁으로 표시될 문자열"></gwc-checkbox>

<gwc-checkbox id="checkbox2" label="말이 아닌" disabled="true"></gwc-checkbox>

<gwc-checkbox id="checkbox3" label="행위로"></gwc-checkbox>

<gwc-checkbox id="checkbox4" label="정의된다."></gwc-checkbox>

</div>

<gwc-button id="button" title="상태 확인">

</gwc-button></div>

그리고 CSS 구성은 다음과 같구요.

.center {

display: flex;

width: 100%;

height: 100%;

justify-content: center;

align-items: center;

flex-direction: column;

gap: 3em;

}

.center { display: flex; width: 100%; height: 100%; justify-content: center; align-items: center; flex-direction: column; gap: 3em; }

.center {
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 3em;
}

js 코드는 다음과 같습니다.

window.onload = () => {

const onChange = (event) => {

const checkbox = event.target;

label.content = `

<span style="color:yellow">${checkbox.id}</span> 상태가

<span style="color:yellow">${checkbox.checked}</span>로 변경되었습니다.`;

};

checkbox1.addEventListener("change", onChange);

checkbox2.addEventListener("change", onChange);

checkbox3.addEventListener("change", onChange);

checkbox4.addEventListener("change", onChange);

button.addEventListener("click", () => {

const bChecked1 = checkbox1.checked;

const bChecked2 = checkbox2.checked;

const bChecked3 = checkbox3.checked;

const bChecked4 = checkbox4.checked;

const txtChecked = "<span style="color:YELLOW">CHECK</span>";

const txtNotChecked = "<span style="color:GRAY">NOT CHECK</span>";

gwcMessage(`

checkbox1: ${bChecked1?txtChecked:txtNotChecked}<br>

checkbox2: ${bChecked2?txtChecked:txtNotChecked}<br>

checkbox3: ${bChecked3?txtChecked:txtNotChecked}<br>

checkbox4: ${bChecked4?txtChecked:txtNotChecked}

`);

});

};

window.onload = () => {
    const onChange = (event) => {
        const checkbox = event.target;
        label.content = `
            ${checkbox.id} 상태가 
            ${checkbox.checked}로 변경되었습니다.`;
    };

    checkbox1.addEventListener("change", onChange);
    checkbox2.addEventListener("change", onChange);
    checkbox3.addEventListener("change", onChange);
    checkbox4.addEventListener("change", onChange);

    button.addEventListener("click", () => {
        const bChecked1 = checkbox1.checked;
        const bChecked2 = checkbox2.checked;
        const bChecked3 = checkbox3.checked;
        const bChecked4 = checkbox4.checked;

        const txtChecked = "CHECK";
        const txtNotChecked = "NOT CHECK";

        gwcMessage(`
            checkbox1: ${bChecked1?txtChecked:txtNotChecked}

            checkbox2: ${bChecked2?txtChecked:txtNotChecked}

            checkbox3: ${bChecked3?txtChecked:txtNotChecked}

            checkbox4: ${bChecked4?txtChecked:txtNotChecked}
        `);
    });
};

실행 결과는 다음과 같습니다.

답글 남기기 응답 취소