온라인 폼을 작성할 때 '기본 주소와 동일' 체크박스를 클릭하면 배송지 정보가 자동으로 채워지는 기능을 본 적이 있을 것입니다. 이처럼 한 입력 필드의 값을 다른 필드에 자동으로 복사하는 기능은 JavaScript를 활용하면 간단하게 구현할 수 있습니다. 이번 글에서는 체크박스 선택 여부에 따라 기본 주소와 우편번호를 보조 주소 필드에 자동으로 채워 넣는 방법을 예제와 함께 살펴보겠습니다.
전체 예제 코드
아래는 HTML과 JavaScript를 활용해 주소 자동 채우기 기능을 구현한 완전한 예제입니다.
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
</style>
</head>
<body>
<h1>JavaScript 자동 채우기 - 다른 필드와 동일한 값 입력</h1>
<h2>기본 주소를 입력하세요</h2>
주소 <input class="address" type="text" /> 우편번호 <input class="pincode" type="text" />
<h4>보조 주소를 기본 주소와 동일하게 설정</h4>
<input class="check" type="checkbox" /> 주소 동일
<h2>보조 주소를 입력하세요</h2>
주소 <input class="address" type="text" /> 우편번호 <input class="pincode" type="text" />
<script type="text/javascript">
let checkEle = document.querySelector(".check");
let addressEle = document.querySelectorAll(".address");
let pinCodeEle = document.querySelectorAll(".pincode");
checkEle.addEventListener("change", (event) => {
if (event.target.checked) {
console.log(addressEle[0].value);
addressEle[1].value = addressEle[0].value;
pinCodeEle[1].value = pinCodeEle[0].value;
}
});
</script>
</body>
</html>코드 작동 원리
이 코드가 어떻게 동작하는지 단계별로 살펴보겠습니다.
1. DOM 요소 선택
document.querySelector(".check")를 사용해 체크박스 요소를 가져오고, document.querySelectorAll()을 사용해 클래스명이 address와 pincode인 모든 입력 필드를 각각 NodeList 형태로 선택합니다. NodeList는 배열처럼 인덱스로 접근할 수 있으므로, 첫 번째 주소 필드는 [0], 두 번째 주소 필드는 [1]로 참조할 수 있습니다.
2. change 이벤트 리스너 등록
체크박스에 change 이벤트 리스너를 등록합니다. 사용자가 체크박스를 클릭하면 이벤트가 발생하고, 콜백 함수가 실행됩니다.
3. 체크 상태 확인 후 값 복사
event.target.checked 속성으로 체크박스가 선택되었는지 확인합니다. 체크된 상태라면 첫 번째 주소와 우편번호 값을 읽어 두 번째 필드에 그대로 대입합니다. 결과적으로 사용자가 직접 입력하지 않아도 보조 주소가 자동으로 채워집니다.
실행 결과
기본 주소와 우편번호를 입력한 뒤 '주소 동일' 체크박스를 클릭하면 아래와 같이 보조 주소 필드에 동일한 값이 자동으로 입력됩니다.
기본 주소를 입력하고 '주소 동일' 체크박스를 클릭했을 때의 결과입니다.
마무리
이 예제는 이커머스 사이트의 주문 폼이나 회원가입 양식에서 자주 사용되는 패턴입니다. 필요에 따라 체크박스를 해제할 때 필드를 비우거나, 입력값이 변경될 때마다 실시간으로 동기화되도록 input 이벤트를 추가로 활용하는 것도 가능합니다. 간단한 몇 줄의 JavaScript만으로도 사용자 경험을 크게 개선할 수 있습니다.