개발을 하다보면 일괄로어떠한 데이터들을 일괄로 삭제 또는 추가를 하기 위해 

체크박스를 이용하여 기능을 구현합니다.

예를 들면 게시판 목록에 쉽게 확인 할 수 있습니다.



똑똑



저희가 자주 쓰는 네이버나 다음의 메일목록을 예를 들도록 해보도록 하겠습니다 ^^





 


위 화면을 보시면 리스트의 좌측에 체크박스들이 각 리스트마다 체크박스가 존재합니다.

불필요한 메일들을 체크박스를 선택을 하여 한번에 목록에서 지우기 위하여 있는것입니다.


그렇다면 최상단에 존재하는 체크박스는 무엇인가요? 

바로 저 상단 체크박스는 현재 존재하는 목록에 체크박스들을 일괄로 선택하게끔 지원을 해주는 놈이되겠습니다.


한번 최상단 체크박스를 클릭해보도록 하겠습니다.






한번에 체크박스들이 선택되었죠? 

바로이 기능에 대하여 포스팅을 작성해보도록 하겠습니다


본 포스팅은 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인 태그들을 찾아서 checked옵션을 true로 정의
            $("input[name=chk]").prop("checked",true);
            //클릭이 안되있으면
        }else{
            //input태그의 name이 chk인 태그들을 찾아서 checked옵션을 false로 정의
            $("input[name=chk]").prop("checked",false);
        }
    })
})

상단코드 기준으로 한번 실행을 해보도록 하겠습니다.


최초 실행 화면






체크박스 선택화면





어떤가요? 맨위에 캡처한 기능과 동일한 기능이 동작 되었죠? ㅎㅎ

프로젝트에 일괄처리가 존재한다면 체크박스로 전체선택 및 해제하는 기능을 이용해보세요!


[출처] http://hellogk.tistory.com/5

블로그 이미지

532

처음 프로그래밍을 시작한 개발자들은 Hello World!를 기억 할 것이다. Hello world가 Hell World가 될 줄 몰랐던 한 개발자의 이야기. 게시글의 출처를 표기하며, 출처를 남기지 않고 펌을 하는것에 대해 법적 책임을 묻지 않습니다.

댓글을 달아 주세요