먼저 checkbox의 기본 개념을 설명하자면,
input type="checkbox" 는 다수의 체크박스가 존재할때 "radio" 타입과달리 같은 name으로 묶어도 여러개의 선택이 가능합니다.
그리고 체크박스는 getElementById가 아닌 getElementsByName 으로 접근해야 NodeList형태로 받아올수있습니다.
NodeList안에는 우리가 제어하고싶은 다양한 속성이 존재하는데 이것은 배열로 접근 가능합니다.
주요 속성은
checked , length , name , value 정도가 되겟습니다.
간단하고 심플한 예제입니다.
<input type="checkbox" name="ch" id="ch" onchange="isChecked()">
<label for="ch">체크안됌</label>
<input type="checkbox" name="ch" id="ch2" onchange="isChecked()">
<label for="ch2">체크안됌</label>
<input type="checkbox" name="ch" id="ch3" onchange="isChecked()">
<label for="ch3">체크안됌</label>
<br>
<br>
<span id="span">모두 동의 되었습니다.</span> // css 에서 display : none;이나 visibility: hidden; 해줍니다.
<script>
function isChecked() {
var ch = document.getElementsByName("ch");
var span = document.getElementById("span");
var trueNum = 0;
for (var i = 0; i < ch.length; i++) {
if (ch[i].checked == true) {
ch[i].labels[0].innerText = "체크됌";
trueNum++;
} else {
ch[i].labels[0].innerText = "체크안됌";
span.style.visibility = "hidden";
}
}
// All체크 인지 체크하는 부분.
if (ch.length == trueNum)
span.style.visibility = "visible";
else
span.style.visibility = "hidden";
trueNum = 0;
}
</script>