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;
}
}
감사합니다.