jquery checkbox 체크박스 모두 선택 해제

html 폼에서 체크박스를 사용할 때 필수적인 기능 중의 하나가 바로 모두 선택, 모두 해제일 것입니다. 어떤 항목에서 checkbox를 사용할 때는 꼭 모두 체크, 모두 해제 기능을 넣어주어야 사용자 측면에서는 편리한 기능일 것이기 때문이죠.

 

자바스크립트로 구현을 할때는 for문을 돌려서 해당 체크박스의 개수만큼 선택을 하거나 해제를 해주었는데, jquery를 이용하면 간단하게 모든 체크박스를 선택하거나 해제할 수 있습니다.

 

<input type="checkbox" name="all" class="checkall">모두 선택

<input type="checkbox" name="apple" class="fruit">사과
<input type="checkbox" name="banana" class="fruit">바나나
<input type="checkbox" name="pear" class="fruit">배
<input type="checkbox" name="grape" class="fruit">포도

 

 

$('.checkall').click(function(){
	$('.fruit').prop('checked',true); //모두 선택
    $('.fruit').prop('checked',false); //모두 해제
});

모두 선택이라는 체크박스를 클릭하게 되면 (class ID : checkall) 과일의 checkbox (class ID : fruit)가 모두 선택 ('checked', true), 모두 해제 ('checked', false)가 됩니다.

 

만약 모두 선택버튼을 눌렀을 때 포도에 해당되는 체크박스만 선택되도록 하고 싶다면 

$("input:checkbox[name='grape']").prop("checked",ture);

위와 같이 처리하면 됩니다.