html onclick 클릭 이벤트를 이용해 자바스크립트에서 체크박스에 체크가 되어 있다면 주문자 정보를 복사하고 다시 체크박스를 해제할 경우 수령인 정보에 대한 글자를 지우는 간단한 소스 코드입니다.
소스코드는 아래 코드를 참고 하시면 됩니다.
<html>
<head>
<title>자바스크립트 체크박스 체크 여부에 따라 데이터 채우고 비워주기</title>
<meta name="generator" content="notepad" />
<meta name="author" content="zzarungna" />
<style type="text/css">
body { font-size:12px; }
input { border:1px solid black; }
#cb1 {border:0px; }
#txtName1, #txtName2 { width:50px; }
#txtAddress1, #txtAddress2 { width:30px; }
.box{ border: 1px solid black; margin-top: 10px;}
</style>
</head>
<body>
<div class="box">
<h3>주문자 정보</h3>
이름 : <input type="text" id="txtName1" />
<br><br>
주소 : <Input type="text" id="Address1" />
<br><br>
</div>
<input type="checkbox" id="cb1" onclick="Copy();" /><label for="cb1">받는 사람이 주문자와 동일합니다.</label>
<div class="box">
<h3>수령인 정보</h3>
이름 : <input type="text" id="txtName2" />
<br><br>
주소 : <Input type="text" id="Address2" />
<br><br>
</div>
</body>
</html>
<script type="text/javascript">
function Copy(){
//check box가 체크 되어 있는 경우 주문자 정보 복사해오기
if (document.getElementById("cb1").checked){
document.getElementById("txtName2").value = document.getElementById("txtName1").value;
document.getElementById("Address2").value = document.getElementById("Address1").value;
}else{//check box가 해제되어 있는 경우 수령인 정보 지워주기
document.getElementById("txtName2").value = "";
document.getElementById("Address2").value = "";
}
}
</script>
복사한 소스를 카피하여 파일 작성이 가능한 메모장이나 기타 코드 편집기 프로그램을 사용해 붙여 넣으시고 파일 확장자를 html로 저장하시면 됩니다.
저장된 파일을 더블클릭하여 실행하시면 웹브라우저에서 실행 결과를 확인하실 수 있으며 주문자 정보에 글자를 입력하고 받는 사람이 주문자와 동일합니다. 체크박스를 체크하게 되면 데이터를 자동으로 채워 줍니다.
다시 체크박스를 해제한 경우엔 수령인 정보 데이터를 지워 줍니다.
간단한 소스 코드이지만 필요한 분들이 있을 수 있다는 생각에 정리해 보았으니 필요하신 분들은 복사해서 필요한 부분에 사용하시면 좋을 듯합니다.