체크박스 전체선택 / 선택해제

Programming/Javascript 2007. 6. 27. 15:51
게시판 등에 여러 게시물을 삭제하거나 할 때 사용하는 기능이다.

체크박스 전체선택
1. 체크박스의 name을 묶는다.
2. 버튼을 눌러 체크박스에 모두 체크하는 함수를 호출한다.
3. 이름 지어진 name 배열의 길이를 알아내어 for 제어문으로 길이 만큼 루프시킨다.
4. for문 안에서 첫번째 체크박스(name[0])부터 마지막 체크박스(name[n])까지 체크한다.
(체크박스 선택해제도 같은 방식이다.)

<html>
<head>
<script type="text/javascript">
function check()
{
   f = document.forms[0];

   for ( i = 0; i < f.list.length; i++ )
       f.list[i].checked = true;
}

function uncheck()
{
   f = document.forms[0];

   for ( i = 0; i < f.list.length; i++ )
       f.list[i].checked = false;
}
</script>
</head>

<body>

<form>
<input type="checkbox" name="list" value="1" /><br />
<input type="checkbox" name="list" value="2" /><br />
<input type="checkbox" name="list" value="3" /><br />
<input type="checkbox" name="list" value="4" /><br />
<input type="checkbox" name="list" value="5" /><br />

<input type="button" onclick="check()" value="전체선택" />
<input type="button" onclick="uncheck()" value="선택해제" />
</form>

</body>
</html>
WRITTEN BY
손가락귀신
정신 못차리면, 벌 받는다.
,