[JavaScript] CheckBox 전체 선택 및 해제 방법

 

 

자바스크립트를 이용하여 웹 개발을 할 경우

체크박스를 전체 선택하거나 전체 해제해야하는 상황이 발생하게 됩니다.

구현화면은 아래 이미지로 확인하시면 되고, 이를 간략하게 정리해보았습니다.

 

 

CheckBox 전체 선택 및 해제 구현화면

 

 

 

 

 

HTML 

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27

<table class="table_t1" width="100%" cellspacing="0">     <caption></caption>     <colgroup>         <col width="3%" />         <col width="3%" />     </colgroup>     <thead>         <tr>             <th>No</th>             <th><input type='checkbox' id='check_all' /></th>         </tr>     </thead>     <tbody>         <tr>             <td><c:out value="1"/></td>             <td><input type="checkbox" name="chk_box" value="1" /></td>         </tr>         <tr>             <td><c:out value="2"/></td>             <td><input type="checkbox" name="chk_box" value="2" /></td>         </tr>         <tr>             <td><c:out value="3"/></td>             <td><input type="checkbox" name="chk_box" value="3" /></td>         </tr>     </tbody> </table> Colored by Color Scripter

cs

 

보통 리스트 형태는 대부분 테이블 태그를 사용하게 됩니다.

여기 thead 부분에서 type을 checkbox / id를 check_all를 넣어주고

tbody에서는 type checkbox / name값을 chk_box로 통일해줍니다.

 

 

 

 

JavaScript

 

1 2 3 4 5 6 7 8

$(function(){     $("#check_all").click(function(){         var chk = $(this).is(":checked");         if(chk) $("input[name='chk_box']").attr('checked', true);         else  $("input[name='chk_box']").attr('checked', false);      });     });   Colored by Color Scripter

cs

 

 

스크립트에서 시작함수인 function에 id값인 check_all을 클릭했을때 동작하는 함수를 생성해줍니다.

그래서 이 버튼을 클릭한다면 chk_box값을 attr checked true로 하여 전부 체크하도록 하고

아니라면 해제하도록 설정해주면 됩니다.