JavaScript 체크박스 전체선택 및 해제

체크박스 관련해서 자주쓰는 코드는 정리해놓으려고 작성한다.

검색하기 귀찮아 .. 

 

전체선택

<input type="checkbox" id="cboxAll" name="cboxAll" onclick="checkAll();">
<input type="checkbox" name="cbox" id="checkbox1">
<input type="checkbox" name="cbox" id="checkbox2">

다음과 같이 전체선택용 체크박스와 일반 체크박스 2개가 있다고 가정하면,

function checkAll() {
	if($("#cboxAll").is(':checked')) {
		$("input[name=cbox]").prop("checked", true);
	} else {
		$("input[name=cbox]").prop("checked", false);
	}
}

이렇게 전체선택 및 해제가 가능하다.

 

하위 체크박스 1,2가 선택되었을때 전체선택에 체크가 되게하거나

전체선택이 체크된 상태에서 체크박스가 1개라도 체크가 해제될 경우

>> 전체선택 체크가 해제되어야함

$(document).on("click", "input:checkbox[name=cbox]", function(e) {
	
	var chks = document.getElementsByName("cbox");
	var chksChecked = 0;
	
	for(var i=0; i<chks.length; i++) {
		var cbox = chks[i];
		
		if(cbox.checked) {
			chksChecked++;
		}
	}
	
	if(chks.length == chksChecked){
		$("#cboxAll").prop("checked", true);
	}else{
		$("#cboxAll").prop("checked",false);
	}
	
});

 체크박스가 클릭될 때 이벤트를 주기