<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function changMail() {
// click 이벤트 | 객체를
// change 이벤트 : 객체의 값이 변경될 때 발생
// change 이벤트 핸들러 : onchange()
var f=document.forms[0];
if(f.selectEmail.value==""){ // selectEmail의 값이 '선택하삼'으로 되어있다면 email1,email2 2개칸 모두 비워두고 email2칸은 오직 읽을 수만 있게한다.(첫화면 설정)
f.email1.value="";
f.email2.value="";
f.email2.readOnly=true;
f.email1.focus();
return;
}
if(f.selectEmail.value=="direct"){ // direct(직접입력)일 때는 readonly를 해제하여 write 할 수 있게 해준다.)
f.email2.value="";
f.email2.readOnly=false;
f.email1.focus();
return;
}
f.email2.value=f.selectEmail.value;
f.email2.readOnly=true;
f.email1.focus();
}
function check() { // 체크박스 한번에 모두 선택가능하게 만드는 소스
var f=document.forms[0];
if(f.chkAll.checked){ // chkAll에 체크가 되면 chk배열의 총길이만큼 모두 체크하여준다.(모두 체크)
for(var n=0; n<f.chk.length; n++)
f.chk[n].checked=true;
}else{ // chkAll에 체크가 해제되면 chk배열의 총길이만큼 모두 해제하여준다.(모두 체크 해제)
for(var n=0; n<f.chk.length; n++)
f.chk[n].checked=false;
}
}
</script>
</head>
<body>
<form action=""> <!-- action은 form을 받을 주소를 쓴다. 여기서는 본문안에 필요한 모든게 있기 때문에 쓰지 않아도 된다) -->
이메일:
<input type="text" name="email1">
@
<input type="text" name="email2" readonly="readonly">
<select name="selectEmail" onchange="changMail();">
<option value=""> 선택하삼 </option>
<option value="naver.com">네이버</option>
<option value="hanmail.net">한메일</option>
<option value="gmail.com">한메일</option>
<option value="direct">직접입력</option>
</select>
<br/>
<input type="checkbox" name="chkAll" onclick="check();"><br/>
<input type="checkbox" name="chk" value="1">1<br/> <!-- name이 같고 value를 다르게 하여 배열로 자바스크립트를 이용하여 함수를 작성한다. -->
<input type="checkbox" name="chk" value="2">2<br/>
<input type="checkbox" name="chk" value="3">3<br/>
<input type="checkbox" name="chk" value="4">4<br/>
<input type="checkbox" name="chk" value="5">5<br/>
</form>
</body>
</html>
'javascript' 카테고리의 다른 글
| 자바스크립트 기본 예제(회원약관 동의) (0) | 2013.06.25 |
|---|---|
| 자바스크립트 기본 예제(아이디 이미지) (0) | 2013.06.25 |
| 자바스크립트 기본 예제(항목 이동 / 사용자가 옵션 추가) (0) | 2013.06.25 |
| 자바스크립트 기본 예제(사칙연산) (0) | 2013.06.25 |
| 자바스크립트 기본 예제(회원가입 양식) (0) | 2013.06.25 |