입력 양식 이벤트

이벤트 이름	설명
change	입력 양식의 내용을 변경할 때 발생합니다.
focus	입력 양식에 초점을 맞추면 발생합니다.
focusin	입력 양식에 초점이 맞추어지기 바로 전에 발생합니다.
focusout	입력 양식에 초점이 사라지기 바로 전에 발생합니다
blur	입력 양식에 초점이 사라지면 발생합니다.
select	입력 양식을 선택할 때 발생합니다(input[type="text"] 태그 및 textarea 태그 제외)
submit	submit 버튼을 누르면 발생합니다.
reset	reset 버튼을 누르면 발생합니다.

ex)

<body>
	<form id="my-form">
		<table>
			<tr>
				<td>이름 : </td>
				<td><input type="text" name="name" id="name" /></td>
			</tr>
			<tr>
				<td>비밀번호: </td>
				<td><input type="password" name="password" id="password" /></td>
			</tr>
		</table>
		<input type="submit" value="제출" />
	</form>
</body>

submit 이벤트는 form 태그에서 발생하는 이벤트

$(document).ready(function() {
	$('#my-form').submit(function(event) {
		// 입력 양식의 value를 가져옵니다.
		var name = $('#name').val();
		var password = $('#password').val();

		// 출력합니다.
		alert(name + ' : ' + password);

		//기본 이벤트를 제거합니다.
		event.preventDefault();
	});
});

type 속성이 checkbox와 radio인 input 태그의 상태를 변경하는 이벤트는 click 이벤트가 아니라 change 이벤트 입니다.

<script>
	$(document).ready(function() {
		$('#all-check').change(function() {
			if (this.checked) {
				$('#check-item').children().prop('checked', true);
			}
			else {
				$('#check-item').children().prop('checked', false);
			}
		});
	});
</script>
<body>
	<input type="checkbox" id="all-check" />
	<label>All</label>
	<div id="check-item">
		<input type="checkbox" />
		<label>A Option</label>
		<input type="checkbox" />
		<label>B Option</label>
		<input type="checkbox" />
		<label>C Option</label>
	</div>
</body>

체크 상태를 확인할 때는 입력 객체의 checked 속성을 확인하고, 체크 상태를 바꿀 때는 prop() 메서드를 사용합니다.