1. 선택하기, 선택 해제하기
//attribute로 선택, 선택해제
$("대상").attr("checked", true); /* 선택 */
$("대상").attr("checked", false); /* 해제 */
//property로 선택, 선택해제 --> attr로 안되는 경우
$("대상").prop("checked", true); /* 선택 */
$("대상").prop("checked", false); /* 해제 */
2. 체크가 되었는지 여부
//대상이 1개인 경우
$("대상").is(":checked"); //true 또는 false
/*
대상이 여러개인 경우(멀티 체크같은 상황)
통상적으로 대상이 여러개인 경우는 클래스를 동일하게 주어 반복문으로 처리한다.
*/
$('.클래스').each(function(index){ //index는 순서
$(this).is(":checked"); //true 또는 false
});
3. 체크박스의 상태변화 감지(체크, 체크해제)
$('대상').change( function(){
var imChecked = $(this).is(":checked");
console.log('체크된 여부 : '+imChecked);
});
4. (위 내용을 토대로) 체크박스 1개에 의해서 전체선택, 해제
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Jquery</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
</head>
<body>
<label>
나는 전체 선택 : <input type='checkbox' id='allSelect' value='all'>
</label>
<br>
<input type='checkbox' class='all' value='1'>
<input type='checkbox' class='all' value='2'>
<input type='checkbox' class='all' value='3'>
</body>
</body>
</html>
<script>
/*
대상이 여러개인 경우(멀티 체크같은 상황)
통상적으로 대상이 여러개인 경우는 클래스를 동일하게 주어 반복문으로 처리한다.
*/
$('#allSelect').change( function(){
var imChecked = $(this).is(":checked");
if(imChecked){
$('.all').prop('checked',true);
} else {
$('.all').prop('checked',false);
}
});
</script>
반응형
'Javascript > [기초] Javascript' 카테고리의 다른 글
| Javascript 전개 연산자(... 문법, dot dot dot, Spread operator tricks) (0) | 2020.01.10 |
|---|---|
| (기본/기초) Javascript 배열 정렬, Javascript sort array (0) | 2019.12.12 |
| (기본/기초) Jquery select option tag, html select option 가져오기 (0) | 2019.11.08 |
| (기본/기초) javascript setTimeout setInterval clearInterval (0) | 2019.11.08 |
| (기본/기초) 자바스크립트 var, let, const (Javascript var) (0) | 2019.10.04 |
* 위 에니메이션은 Html의 캔버스(canvas)기반으로 동작하는 기능 입니다. Html 캔버스 튜토리얼 도 한번 살펴보세요~ :)
* 직접 만든 Html 캔버스 애니메이션 도 한번 살펴보세요~ :)
댓글