체크박스 전체 선택 / 전체 해제 자바스크립트로만

 

제일 간단하게 체크박스 전체 선택/ 전체 해제 구현하기

(JavaScript만 사용)

 

<label><input type="checkbox" id="all" onclick="abc()">전체선택</label><br>
<input type="checkbox" name="checkbox" id="1" >1<br>
<input type="checkbox" name="checkbox" id="2">2<br>
<input type="checkbox" name="checkbox" id="3">3<br>


</body>
</html>
<script>

function abc() {
	if(document.getElementById("all").checked==true){
		for(var i=0;i<3;i++)
			document.getElementsByName("checkbox")[i].checked=true;
	}
	if(document.getElementById("all").checked==false){
		for(var i=0;i<3;i++)
			document.getElementsByName("checkbox")[i].checked=false;
	}

};

 

document.getElementById 

해당 ID 소스를 가져오기. ID는 중복되지않아야함으로 전체 선택 체크박스를 가져올 때 사용

 

document.getElementsByName

해당 Name 소스 가져오기. Name은 중복되도OK 그래서 배열이나 checkbox처럼 동일한 아이들을 가져올 때 유용하게 사용한는데, 이 경우 전체 선택 되어질 checkbox들의 Name을 동일하게 잡아주어서 한번에 가지고 왔다. 

(물론 반복문 썼지만)