개발을 하다보면 일괄로어떠한 데이터들을 일괄로 삭제 또는 추가를 하기 위해
체크박스를 이용하여 기능을 구현합니다.
예를 들면 게시판 목록에 쉽게 확인 할 수 있습니다.
저희가 자주 쓰는 네이버나 다음의 메일목록을 예를 들도록 해보도록 하겠습니다 ^^
위 화면을 보시면 리스트의 좌측에 체크박스들이 각 리스트마다 체크박스가 존재합니다.
불필요한 메일들을 체크박스를 선택을 하여 한번에 목록에서 지우기 위하여 있는것입니다.
그렇다면 최상단에 존재하는 체크박스는 무엇인가요?
바로 저 상단 체크박스는 현재 존재하는 목록에 체크박스들을 일괄로 선택하게끔 지원을 해주는 놈이되겠습니다.
한번 최상단 체크박스를 클릭해보도록 하겠습니다.
한번에 체크박스들이 선택되었죠?
바로이 기능에 대하여 포스팅을 작성해보도록 하겠습니다
본 포스팅은 jquery 1.9버전의 CDN을 이용하여 진행을 하도록 하였습니다.
jqeury CDN 스크립트 INCLUDE하기
1 | <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.9.0/jquery.js"></script>
|
HTML코드 작성(BODY 태그내에 기술)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <table border="1">
<tr>
<td><input type="checkbox" id="checkall" /></td>
<td>내용</td>
</tr>
<tr>
<td><input type="checkbox" name="chk" /></td>
<td>테스트내용입니다테스트내용입니다</td>
</tr>
<tr>
<td><input type="checkbox" name="chk" /></td>
<td>안녕하세요개발로짜입니다안녕하세요개발로짜입니다</td>
</tr>
</table>
|
jquery 스크립트 코드 작성
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | $(document).ready(function(){
$("#checkall").click(function(){
if($("#checkall").prop("checked")){
$("input[name=chk]").prop("checked",true);
}else{
$("input[name=chk]").prop("checked",false);
}
})
})
|
상단코드 기준으로 한번 실행을 해보도록 하겠습니다.
최초 실행 화면
체크박스 선택화면
어떤가요? 맨위에 캡처한 기능과 동일한 기능이 동작 되었죠? ㅎㅎ
프로젝트에 일괄처리가 존재한다면 체크박스로 전체선택 및 해제하는 기능을 이용해보세요!
by 개발로짜
