[javascript] 체크박스 전체 체크 및 해제

pure javascript로 전체 체크박스 기능 구현하는 방법을 알려드리겠습니다.

 

일단 기능은

1. all 체크박스 클릭시 하위 체크박스 체크 및 해제

2. 하위 체크박스 클릭시 전부 체크상태면 all 체크박스 체크

3. 하위 체크박스 클릭시 하나라도 해제 상태면 all 체크박스 해제

 

html

---

<ul class="checkbox_list">
	<li class="type_all_check">
		<div class="m_check_wrap">
			<input type="checkbox" id="allCheck" onclick="allCheck(event)">
			<label for="allCheck">All agree</label>
		</div>
	</li>
	<li>
		<div class="m_check_wrap">
			<input type="checkbox" class="check_all_list" id="agree1" onclick="checkAllList(event)">
			<label for="agree1">agree1</label>
		</div>
	</li>
	<li>
		<div class="m_check_wrap">
			<input type="checkbox" class="check_all_list" id="agree2" onclick="checkAllList(event)">
			<label for="agree2">agree2</label>
		</div>
	</li>
</ul>

---

javascript

---

function allCheck(e) { // 전체 체크 버튼 클릭시 전체 체크 및 해제
	if(e.target.checked) {
		document.querySelectorAll(".check_all_list").forEach(function(v, i) {
			v.checked = true;
		});
	} else {
		document.querySelectorAll(".check_all_list").forEach(function(v, i) {
			v.checked = false;
		});
	}
}
function checkAllList(e) { 체크 버튼 클릭시 전체 체크 버튼 체크 및 해제
	let checkCount = 0;
	document.querySelectorAll(".check_all_list").forEach(function(v, i) {
		if(v.checked === false){
			checkCount++;
		}
	});
	if(checkCount>0) {
		document.getElementById("allCheck").checked = false;
	} else if(checkCount === 0) {
		document.getElementById("allCheck").checked = true;
	}
}

---

 

 

 

감사합니다.