입력 양식이 바뀔 때 이벤트를 받는 내용은 기존의 자바스크립트와 비슷합니다.
다음은 type 속성이 checkbox와 radio인 input 태그의 상태를 변경하는 이벤트는 click 이벤트가 아니라 change 이벤트입니다.
소스
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script>
$(document).ready(function (event){
//체크박스가 변하면 이쪽으로 오게 됩니다.
//이중 all-check 값이 변하게 되면 check-item아이디를 가진 것의
//모든 체크박스를 체크하게 됩니다.
$('#all-check').change(function() {
if(this.checked){
$('#check-item').children().prop('checked', true);
}else{
$('#check-item').children().prop('checked', false);
}
});
});
</script>
</head>
<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>
</html>
출력화면
일반 체크박스입니다.
'프로그래밍 > Jquery' 카테고리의 다른 글
| jquery - animate 메소드를 이용한 동적으로 스타일 변화시키기 (0) | 2014.10.27 |
|---|---|
| jquery - hover 메소드와 animate 메소드를 이용한 마우스 오버 애니메이션 효과 만들기 (0) | 2014.10.27 |
| jquery - innerfade 플러그인을 이용한 사진 변경 효과 적용하기 (0) | 2014.10.27 |
| jquery - toggle 메소드를 이용한 시각효과 만들기 (0) | 2014.10.20 |
| jquery - window객체를 활용하며 무한 스크롤 구현하기 (0) | 2014.10.18 |
| jquery - keyup메소드를 이용한 글자수세기프로그램 만들기 (0) | 2014.10.11 |
| jquery - delegate 방법을 사용한 이벤트 연결 범위 한정 (0) | 2014.10.11 |
| jquery - 기본 이벤트를 제거하고 이벤트 전달 막는 법 2가지 (0) | 2014.10.11 |