[카테고리:] GWC UI Library

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

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

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

.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 = `
            ${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}
        `);
    });
};

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