[JavaScript] checkbox 체크박스 '전체' 버튼 선택/해제 클릭 이벤트 함수

//HTML

<div class="button-group" id="contentTypeWrapper">
	<div class="ui-checkbox">
		<input type="checkbox" id="allchk" checked />
		<label for="allchk"> <c:out value="${'전체'}" /></label>
	</div>
	<c:forEach var="contenType" items="${contentTypeList}"> varStatus="g">
		<div class="ui-checkbox">
			<input type="checkbox" id="${contentType.codeId}" checked />
			<label for="${contentType.codeId}"><c:out value="${contentType.codeName}" /></label>
		</div>
	</c:forEach>
</div>

 

- 만들고 싶은 기능 설명 -

화면에 버튼을 만드는 로직은 위와 같이 해두었다.
contentTypeList가 넘어오고, 거기서 요소를 하나씩 꺼내서 codeId와 codeName 으로 버튼을 만든다.

 

만들고 싶은 기능은 이렇다.
'전체' 버튼이 먼저 있고, 나머지 버튼들도 있다.
'전체' 버튼을 클릭하면 나머지 버튼들도 그 값을 따라서 함께 체크되거나 해제된다.
나머지 버튼을 클릭해서 모두 선택된 상태가 되면 자동으로 '전체' 버튼도 선택된다.
나머지 버튼을 클릭해서 모두 선택된 상태가 아니게 되면 자동으로 '전체' 버튼도 해제된다.

위 기능을 구현하는 이벤트 로직을 아래와 같이 만들어 보았다.

// JavaScript

var checkContentHandler = function(e){ 
	// 클릭한 체크박스와 같은 그룹으로 묶여 있는 체크박스에 모두 접근하기
	const boxList = e.target.closest('div.button-group').querySelectorAll('input[type="checkbox"]');
	// '전체' 버튼만 골라오기. '전체' 버튼은 가장 먼저 있음.
	const boxAll = boxList[0];
	// 클릭한 버튼이 '전체' 버튼이라면
	if(e.target == boxAll) {    
		// 나머지 버튼들을 모두 하나씩 꺼내와서
		boxList.forEach(function(item, index) {
			// '전체' 버튼 값과 똑같이 바꾸고
			item.checked = e.target.checked;    
		});
	// '전체' 버튼을 클릭한 게 아니라면
	} else{    
		// 일단 기본값은 참으로 두는 플래그를 하나 세우고
		let flag = true;
		// 나머지 버튼들을 모두 하나씩 꺼내와서
		boxList.forEach(function(item, index) {
			// 일단 '전체' 체크 박스는 제외하고 나머지 체크박스 중에서
			if(item == boxAll) return;    
			// 나머지 체크박스 중에 하나라도 체크가 안 된 버튼이 있다면 flag를 false로 꺾기
			if(!item.checked) flag = flase;    
		});
		// '전체 '체크박스는 플래그 값 따라가기 - 나머지 체크박스 중에서 하나라도 체크가 안 된 버튼이 있다면 false가 될 것이고, 모두 체크가 된 상태라면 true가 된다
		boxAll.checked = flag;    
	}
}
// 위와 같은 로직을 실행하는 이벤트를 모든 체크박스 버튼에 걸어주기
$('#contentTypeWrapper input[type="checkbox"]').on('change', checkContentHandler);

 

-220810