카테고리 없음

[21.10.13] exam09

luvforjunk 2021. 10. 14. 09:32
728x90
반응형
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="../css/event.css">
</head>
<body>
<h1>Change 이벤트 확인하기</h1>
<div id="input">
   <h3>이름</h3>
   <input type="text" name="user_name" />
   
   <h3>취미</h3>
   <label><input type="checkbox" name="hobby" value="축구"/> 축구</label>
   <label><input type="checkbox" name="hobby" value="농구"/> 농구</label>
   <label><input type="checkbox" name="hobby" value="야구"/> 야구</label>
   
   <h3>성별</h3>
   <label><input type="radio" name="gender" value="남자"/> 남자</label>
   <label><input type="radio" name="gender" value="여자"/> 여자</label>
   
   <h3>직업</h3>
   <select name="job">
      <option value="프로그래머">프로그래머</option>
      <option value="퍼블리셔">퍼블리셔</option>
      <option value="디자이너">디자이너</option>
      <option value="기획">기획</option>
   </select>
</div>
<h2>결과</h2>
<div id="result"></div>

<script type="text/javascript" src="http://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$('#input > input[name="user_name"]').change(function(){
		$('#result').text('이름의 입력값이 변경되었습니다.');
	}); 
	
	$('input[name=hobby]').change(function(){
		$('#result').text('취미가 변경되었습니다.');
	});
	
	$('input[name=gender]').change(function(){
		$('#result').text('성별이 변경되었습니다.');
	});
	
	$('select[name=job]').change(function(){
		$('#result').text('직업이 변경되었습니다.');
	});
});	
</script>
</body>
</html>
728x90
반응형