JQuery, Checkbox 전체 선택/해제

Checkbox 전체 선택/해제

 

<input type="checkbox" name="all" id="all_check"> 전체선택

<input type="checkbox" name="hobby" value="축구" class="hobby_check"> 축구
<input type="checkbox" name="hobby" value="농구" class="hobby_check"> 야구
<input type="checkbox" name="hobby" value="야구" class="hobby_check"> 농구

---

오류 1

$('#all_check').change(function(){
	$('.hobby_check').attr('checked', true); 
});

 

전체 체크는 되는데 해제가 적용이 되지 않는다.

 

이유 : #all_check가 false가 되어도 checked가 true이기 때문에

 

해결방안

 

all_check의 상태에 따라 변경되도록 한다.

$('#all_check').change(function(){
	let isChk = $(this).is(':checked') //checked가 있냐 없냐 (true, false)
	$('.hobby_check').attr('checked', isChk);
})

 

all_check가 true가 되어 있으면 hobby_check가 전부 true가 되고
all_check가 false면 hobby_check가 전부 가 false가 된다.

---

오류2

전체 선택 후 해제가 한번만 된다.

 

이유 : attr를 사용해서

해결방안

.attr를 사용하면 한번의 전체선택/전체해제는 잘 된다.
하지만 전체 선택 후 부분적으로 해제하면 전체 선택/해제가 제대로 안된다.

==> 해결 방법 : .prop

$('.hobby_check').prop('checked', isChk);

 

---

결론

 

$('.hobby_check').change(function(){
	if(!($(this).is(':checked'))) {
		$('#all_check').prop('checked', false)
	}
})