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 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 | <!DOCTYPE html> <html lang="ko"> <head> <meta charset="utf-8"> </head> <body> <table border="1"> <tr> <th>전체</th> <th><input type="checkbox"></th> </tr> <tr> <td>1</td> <td><input type="checkbox" ></td> </tr> <tr> <td>2</td> <td><input type="checkbox"></td> </tr> <tr> <td>3</td> <td><input type="checkbox"></td> </tr> <tr> <td>4</td> <td><input type="checkbox"></td> </tr> </table> <script src="js/jquery.js"></script> <script> var listAll = $("input[type='checkbox']").eq(0); // 첫번째 체크박스 var list = $("input[type='checkbox']").not(listAll); // 첫번째를 제외한 체크박스 var size; // 체크된 체크박스 카운터 listAll.click(function() { if($(this).prop("checked")) { list.prop("checked", true); } else { list.prop("checked", false); } }); list.click(function() { size = list.filter(':checked').size(); if(size == list.length) { listAll.prop("checked", true); } else { listAll.prop("checked", false); } }); </script> </body> </html> |
반응형
'jQuery' 카테고리의 다른 글
| [jQuery] 고급 속성(Attribute) 선택자 (0) | 2015.04.30 |
|---|---|
| [jQuery] append, appendTo, prepend, prependTo (0) | 2015.04.13 |
| [jQuery] css px 제거 숫자값만 가져오기 (1) | 2015.03.25 |
| [jQuery] event.data - for문 i값 버튼에 저장 (0) | 2015.03.13 |
| [jQuery] 동적 요소 생성 - 두번째 인자 객체형식 (0) | 2015.02.12 |
