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 61 62 63 | <!DOCTYPE html> <html lang="ko"> <head> <meta charset="utf-8"> <style> ul { width: 200px; } li { border:1px solid #000; background: skyblue; margin: 2px 0 0 0; } li.on { background: hotpink; } </style> </head> <body> <ul> <li class="btnAll">전체선택</li> <li class="btn">선택1</li> <li class="btn">선택2</li> <li class="btn">선택3</li> <li class="btn">선택4</li> <li class="btn">선택5</li> </ul> <script src="js/jquery.js"></script> <script> var size; $('.btnAll').click(function() { $(this).toggleClass('on'); if($(this).hasClass('on')) { $('.btn').addClass('on'); } else { $('.btn').removeClass('on'); } }); $('.btn').click(function() { $(this).toggleClass('on'); size = $('.btn.on').size(); if(size == $('.btn').size()) { $('.btnAll').addClass('on'); } else { $('.btnAll').removeClass('on'); } }); </script> </body> </html> |
반응형
'jQuery' 카테고리의 다른 글
| [jQuery] select option 선택 제어 (0) | 2015.06.11 |
|---|---|
| [jQuery] :has() - 자식을 가지고 있는 요소 선택 (0) | 2015.06.08 |
| [jQuery] 고급 속성(Attribute) 선택자 (0) | 2015.04.30 |
| [jQuery] append, appendTo, prepend, prependTo (0) | 2015.04.13 |
| [jQuery] 회원가입 체크박스 제어 예제 - 개별선택, 전체선택, 해제 (0) | 2015.04.07 |
