다음과 같은 라디오 버튼 그룹이 있다고 가정해 보겠습니다.
<label> Gender: <input type="radio" name="gender" value="Male" />Male <input type="radio" name="gender" value="Female" checked/>Female </label>
라디오 그룹에서 특정 라디오 버튼을 선택하려면 JavaScript에서 해당 요소의 checked 속성을 true로 설정하면 됩니다. 아래 예제에서는 getElementsByTagName() 메서드로 모든 input 요소를 가져온 뒤, 값이 'Male'인 라디오 버튼을 찾아 선택 처리하고 있습니다.
예제
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initialscale=1.0">
<title>Document</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fontawesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<label>
Gender:
<input type="radio" name="gender" value="Male" />Male
<input type="radio" name="gender" value="Female" checked/>Female
</label>
<script>
var tagValues = document.getElementsByTagName('input');
for (const obj of tagValues) {
if (obj.value === 'Male'){
obj.checked = true;
}
}
</script>
</body>
</html>위 프로그램을 실행하려면 파일 이름을 “anyName.html(index.html)”로 저장한 후, 해당 파일을 마우스 오른쪽 버튼으로 클릭하세요. VS Code 편집기에서 “Open with Live Server” 옵션을 선택하면 브라우저에서 바로 결과를 확인할 수 있습니다.
출력 결과
위 코드를 실행하면 다음과 같은 화면이 나타납니다.
참고: 더 간단한 방법
요소가 많지 않다면 querySelector()를 사용해 한 줄로 처리할 수도 있습니다.
document.querySelector('input[name="gender"][value="Male"]').checked = true;이 방법은 반복문 없이 원하는 라디오 버튼을 직접 찾아 선택하기 때문에 코드가 더 간결하고 가독성이 좋습니다.