[Javascript] 체크박스 전체선택 해제 예제소스

2023. 1. 28. 12:04

Javasciprt를 이용하여 체크박스 전체선택 및 해제를 해보겠습니다.

아래의 예제 소스를 통해 구현 방법과

소스의 설명을 통해 구조를 알아보겠습니다.

예제 소스

<html>
<script type="text/javascript"> 
		function chkAll(){ 
			var count = chkform.chk.length;
			
			for(var n=0; n<count; n++){ 
				var chkName = document.getElementsByName("chk");
				var fname = chkName[n].getAttribute( 'id' );
				
				if(document.chkform.allcheck.checked){  
					document.getElementById(fname).checked=true;  
				}else{ 
					document.getElementById(fname).checked=false;  
				} 
			} 
		} 
</script>
<body>
	<form name="chkform">
		<input type="checkbox" id="allcheck" onclick="chkAll();">전체<br>
		<input type="checkbox" id="aa" name="chk">1번 
		<input type="checkbox" id="bb" name="chk">2번
		<input type="checkbox" id="cc" name="chk">3번
		<input type="checkbox" id="dd" name="chk">4번 
		<input type="checkbox" id="ee" name="chk">5번
	</form>
</body>
</html>

소스를 구현했을 때

위와 같은 화면이 실행됩니다.

소스 설명

var count = chkform.chk.length;

-> 소스 내 chk 이름을 갖는 Element 갯수를 확인합니다.

var chkName = document.getElementsByName("chk");

var fname = chkName[n].getAttribute( 'id' );

-> 위의 도출한 name 개수로 for문을 수행하며
각각의 name에 할당된 id 값을 저장합니다.

if(document.chkform.allcheck.checked){

document.getElementById(fname).checked=true;

}else{

document.getElementById(fname).checked=false;

}

-> 전체 체크박스의 상태에 따라 각 ID에 해당하는
체크박스를 체크하거나 체크 해제 합니다.

실행 모습

'Dev > JavaScript' 카테고리의 다른 글

[Javascript] 쿠키 생성, 삭제, 기간만료 제어하기 (0)	2023.02.02
[Javascript] 페이지 새로고침 명령어 구현 소스 (0)	2023.01.27
[Javascript] 업로드 이미지 미리보기 예제소스 (0)	2023.01.26
[Javascript] iframe post 전송 예제 (0)	2022.12.26
[Javscript] 문자를 숫자, 숫자를 문자로 변환하기 (0)	2022.12.09

We Can it