JavaScript에서 라디오 버튼 작업하기

이제 라디오 버튼을 작업해 봅시다. 라디오 버튼은 그룹으로 구성된 토글 스위치로, 그 중 하나만 선택할 수 있습니다. 여러 라디오 버튼이 하나의 그룹이 되려면, name 속성 값이 동일해야 합니다:

<input type="radio" name="elem">
<input type="radio" name="elem">
<input type="radio" name="elem">

JavaScript에서 어떤 버튼이 선택되었는지 구분하기 위해, 그룹 내 각 라디오 버튼에 서로 다른 값을 가진 value 속성을 추가합니다:

<input type="radio" name="elem" value="1">
<input type="radio" name="elem" value="2">
<input type="radio" name="elem" value="3">

특정 라디오 버튼을 기본적으로 선택된 상태로 만들려면, checked 속성을 지정해야 합니다:

<input type="radio" name="elem" value="1" checked>
<input type="radio" name="elem" value="2">
<input type="radio" name="elem" value="3">

JavaScript에서 이러한 버튼을 실제로 어떻게 작업하는지 살펴봅시다. 위에 표시된 라디오 버튼 그룹과 일반 버튼이 있다고 가정해 보겠습니다:

<input type="submit" id="button">

버튼을 클릭했을 때 현재 선택된 라디오 버튼의 value가 화면에 표시되도록 만들어 봅시다.

이 문제를 해결하려면 모든 라디오 버튼을 반복문으로 순회하면서 어느 것이 선택되었는지 확인해야 합니다. 순회하는 각 라디오 버튼의 checked 속성 값을 읽어야 합니다. 이 속성이 true인 버튼이 선택된 라디오 버튼입니다.

설명한 내용을 구현해 보겠습니다:

let radios = document.querySelectorAll('input[type="radio"]');
let button = document.querySelector('#button');

button.addEventListener('click', function() {
	for (let radio of radios) {
		if (radio.checked) {
			console.log(radio.value);
		}
	}
});

3개의 라디오 버튼, 문단 및 버튼이 주어졌습니다. 버튼을 클릭하면 선택된 라디오 버튼의 value를 문단에 출력하세요.