#GWC UI Library : RadioGroup

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

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

    
    

        
        
            
                인간은
                말이 아닌
                행위로
                정의된다.
            
        
    
    

        
        
            
                HUMAN
                IS DEFINED
                BY NOT WORD
                BUT ACT.
            
        
    
            
    

그리고 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 radioGroup = event.target;
        label.content = `
             ${radioGroup.id}의 선택은 
             "${radioGroup.selectedTitle}"입니다.
        `;
     };

    radiogroup1.addEventListener("change", onChange);
    radiogroup2.addEventListener("change", onChange);

    button.addEventListener("click", () => {
        const txtRadioGroup1 = `${radiogroup1.selectedTitle}(${radiogroup1.selectedIndex})`;
        const txtRadioGroup2 = `${radiogroup2.selectedTitle}(${radiogroup2.selectedIndex})`;

        gwcMessage(`
            radiogroup1: ${txtRadioGroup1}

            radiogroup2: ${txtRadioGroup2}
        `);
    });
};

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