반응형
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 |