jQuery
[jQuery] 회원가입 체크박스 제어 예제 - 개별선택, 전체선택, 해제
힘없는염소
2015. 4. 7. 11:18
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> |
반응형