JAVA/JavaScript
체크박스 전체 선택 / 전체 해제 자바스크립트로만
java나유
2022. 8. 22. 12:06
제일 간단하게 체크박스 전체 선택/ 전체 해제 구현하기
(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을 동일하게 잡아주어서 한번에 가지고 왔다.
(물론 반복문 썼지만)
728x90