라디오 버튼을 페이지 로드 시 기본적으로 선택된 상태로 만들려면 해당 버튼의 checked 속성을 true로 설정해야 합니다. checked 값이 true로 지정되면 해당 라디오 버튼은 기본적으로 자동으로 선택(포커스)됩니다.
아래 예제에는 라디오 버튼만 존재하며, 어떤 버튼도 기본으로 선택되어 있지 않습니다.
예제
<html>
<form id="radiobuttons" name="radiobutton">
<input id="rad1" value="a" type="radio" name="check"/>남성
<input id="rad2" value="b" type="radio" name="check"/>여성
<input id="rad3" value="c" type="radio" name="check"/>기타
</form>
<body>
</body>
</html>
위 코드를 실행하면 다음 이미지와 같이 라디오 버튼이 화면에 표시되지만, 어느 버튼도 자동으로 선택되지 않습니다.
실행 결과
위 버튼 중 하나를 기본 선택 상태로 만들려면 초기에 checked 값을 설정해 주어야 합니다. 이는 순수 JavaScript를 사용하여 아래 예제와 같이 간단히 구현할 수 있습니다.
예제
<html>
<form id="radiobuttons" name="radiobutton">
<input id="rad1" value="a" type="radio" name="check"/>남성
<input id="rad2" value="b" type="radio" name="check"/>여성
<input id="rad3" value="c" type="radio" name="check"/>기타
</form>
<body>
<script>
radiobtn = document.getElementById("rad1");
radiobtn.checked = true;
</script>
</body>
</html>
위 코드를 실행하면 첫 번째 라디오 버튼(rad1)이 자동으로 선택된 상태로 다음과 같은 결과를 얻을 수 있습니다.
실행 결과
참고: HTML checked 속성으로 대체하기
JavaScript를 사용하지 않고 HTML만으로도 동일한 결과를 얻을 수 있습니다. input 태그에 checked 속성을 직접 추가하면 해당 버튼이 기본 선택됩니다.
<input id="rad1" value="a" type="radio" name="check" checked/>남성
또한 같은 name 값을 가진 라디오 버튼들은 하나의 그룹으로 묶이며, 그룹 내에서는 한 번에 하나의 버튼만 선택할 수 있다는 점도 기억해 두시기 바랍니다.