<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>라디오 버튼</title>
<script>
// 화살표 함수
// document.addEventListener("DOMContentLoaded",()=>{
document.addEventListener("DOMContentLoaded",function(){
const radios = document.querySelectorAll('input[type=radio][name=fruit]');
const output = document.querySelector("#output");
// 매개변수
radios.forEach(function(radio){
//이벤트 연결
radio.addEventListener('change',function(event){
const current = event.currentTarget; //지금 이벤트 대상
if(current.checked){
output.textContent = `선택한 과일은 ${current.value}입니다.`;
} //end of if
}); //end of change function
}) //end of forEach
}); //end of addEventListener
</script>
</head>
<body>
<form action="" method="post" name="radioCheck">
<h1>좋아하는 과일을 선택하세요</h1>
<input type="radio" name="fruit" id="" value="사과">사과<br />
<input type="radio" name="fruit" id="" value="딸기">딸기<br />
<input type="radio" name="fruit" id="" value="복숭아">복숭아<br />
<input type="radio" name="fruit" id="" value="사과">사과<br />
<!--
라디오 버튼은 name은 같고 value 값은 다르게 주기.
name이 같으면 라디오버튼 하나만 선택 가능
name이 다르면 라디오버튼 중복 선택 가능
-->
<h1 id="output">아직 선택 안함</h1>
</form>
</body>
</html>
개린이입니다...