Dev/JavaScript

[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에 해당하는
     체크박스를 체크하거나 체크 해제 합니다.

 

실행 모습

반응형