[JavaScript] 자바스크립트(JavaScript)에서 radio button 생성하기

Language/JavaScript / / 2025. 3. 11.
반응형

 

HTML에서 radio button을 생성하는 법 말고, 자바스크립트에서 radio button에 데이터를 담고 생성하는 방법은 크게 createElement를 사용하거나 innerHTML을 사용하여 스크립트 단에서 radio button을 생성할 수 있다.

자바스크립트(JavaScript)에서 radio button 생성하기

1. createElement

createElement의 방법은 DOM 조작은 쉬울 수 있으나, 대량의 radio button을 구현하게 되면 성능적으로는 innerHTML보다 떨어진다.

 

1) 먼저, html 내에 라디오 버튼을 생성하고 싶은 곳에 div 태그를 사용하여 위치를 잡아 준다.

<html>
	<body>
		<div id="radiobuttonPlace"></div>
	</body>
</html>

 

 

2) DB에서 가져온 데이터를 key value 형태의 구조로 리스트에 넣고, radio를 구성한다.

, createRadioButtons(json) {
	const container = document.getElementById('selectWHradio');
            
	const options = [];
	
    //DB 데이터를 받아 HashMap에 값을 넣고 options 리스트에 push
	for(let i = 0; i < json.data.length; i++) {
		let param = new HashMap();
		param.put("value", json.data[i].CKEY);
		param.put("text", json.data[i].CNAME);
                
		options.push(param);
	}
    
    //options에서 1개씩 꺼내서 radio id, name, value 세팅
    options.forEach(option => {
        const radioDiv = document.createElement('div');
        radioDiv.className = 'radio-option';

        const radio = document.createElement('input');
        radio.type = 'radio';
        radio.id = option.map.value;
        radio.name = 'selectWHradio';
        radio.value = option.map.value;

        const label = document.createElement('label');
        label.htmlFor = option.map.value;
        label.appendChild(document.createTextNode(option.map.text));

        radioDiv.appendChild(radio);
        radioDiv.appendChild(label);
        container.appendChild(radioDiv);
    });
}

 

 

 

2. innerHTML

innerHTML 방법은 1개의 string 변수를 사용하여 html 코드에 데이터를 계속 이어 붙여서 여러개의 radio button을 생성하는 방법이다. 실질적으로, innerHTML 방식은 createElement 방식보다 코드가 더 짧고, 대량의 radio button을 만들 때 상대적으로 성능이 더 좋다.

 

function createRadioButtons(containerId, name, options) {
    const container = document.getElementById(containerId);
    
    let html = '';
    
    options.forEach(option => {
        html += `
            <input type="radio" id="${option.map.value}" name="${name}" value="${option.map.value}">
            <label for="${option.map.value}">${option.map.text}</label><br>
        `;
    });

    container.innerHTML = html;
}
반응형
저작자표시

'Language > JavaScript' 카테고리의 다른 글

[JavaScript] 자바스크립트(JavaScript)에서 style.textAlign 적용하기  (0) 2025.03.18
[JavaScript] 자바스크립트(JavaScript) 배열(Array) 선언하는 방법  (0) 2024.12.26
[JavaScript] JavaScript trigger change 사용 방법  (0) 2023.06.23
[JavaScript] JavaScript에서 undefined 구분하는 방법  (0) 2023.06.05
[JavaScript] 자바스크립트(JavaScript)에서 Json key, value 가져오는 방법  (0) 2022.08.05
[JavaScript/Jquery] Jquery eq() 메소드란?  (0) 2022.05.14
[자바스크립트/JavaScript] 자바스크립트(JavaScript) 주소창 파라미터 없애는 방법  (0) 2022.04.15
[자바스크립트/JavaScript] 자바스크립트(JavaScript) 이메일 형식 Validation 코드  (0) 2022.04.12
  • 네이버 블러그 공유하기
  • 네이버 밴드에 공유하기
  • 페이스북 공유하기
  • 카카오스토리 공유하기
Language/JavaScript 관련 글
글 더보기

코집사님의
글이 좋았다면 응원을 보내주세요!

티스토리툴바

*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*