이번 강좌에서는 javascript checkbox 컨트롤에 대해서 알아보겠습니다.
체크박스 전체 컨트롤
웹사이트 메뉴를 선택할 때 체크 기능을 많이 사용하는데요. 메뉴 한개당 하나의 checkbox가 필요하지만 전체 메뉴를 체크하거나 해제할 경우 이를 지원할 select all 기능이 필요합니다.
그래서 체크박스 전체선택과 전체해제 기능을 구현해야 하는데요. 이 기능을 javascript를 통해서 한번 구현해 보겠습니다.
checkbox 전체 선택
<script type="text/javascript">
function check(count) { // count : 체크박스의 갯수
for(var n=1; n<=count; n++){
var fname = 'c'+n; // c1,c2,c3 를 변수에 저장
if(document.checkform.chkAll.checked){
//맨위의 체크박스가 체크될 경우
document.getElementById(fname).checked=true;
//id가 c1,c2,c3인 체크박스를 모두 체크
}else{
document.getElementById(fname).checked=false;
//모두 c1,c2,c3언체크
}
}
}
</script>
<body>
<form name="checkform">
<input type="checkbox" id="chkAll" onclick="check(3)"><br>
<input type="checkbox" id="c1">로또<br>
<input type="checkbox" id="c2">1등<br>
<input type="checkbox" id="c3">되고싶다<br>
</form>
</body>
실행 화면
위의 체크박스 전체선택 예제는 위의 소스를 구현하여 만든 예제입니다.
한번 테스트 해보시기 바랍니다.
개발 Tip
또한, onclick 이벤트시에 펑션에 넘겨지는 숫자 3은 예제에서는 하드코딩으로 입력해 놓았지만 정상적으로 하려면 파라미터로 받은 데이터 리스트의 갯수를 넣어서 적용하셔야 합니다. 즉, 게시판으로 예를 들면 DB에서 select 게시글의 갯수 나타내는 데이터의 size나 length의 값을 넣으시면 됩니다.
이렇게 javascript checkbox 전체선택 및 해제 방법에 대해서 알아보았는데요. 많이 쓰이는 기능이니 반드시 기억해 두시기 바랍니다.