jQuery 로 원하는 갯수만큼 checkbox 선택하기
Javascript 예제 2011. 11. 24. 23:32
티켓 예매하는 사이트 같은데서 보면 인원수를 선택하고 그 인원수만큼만 좌석을 선택하는게 있다.
고런걸 한번 jQuery를 이용해서 간략하게나마 맹글어 보겠다.
저쪽 아래의 소스 코드로 맹글어질 것은 아래와 같다. 테스트로 클릭해 보셈~
※ 요것은 IE7~9, 크롬에서 정상적으로 테스트 됬다.
인원수 선택 :
소스코드
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 | <head> <meta http-equiv="Content-Type" content="text/html; charset=EUC-KR"/> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script> <script> // html 이 다 로딩된 후 실행 $(document).ready(function() { // 체크박스들이 변경됬을때 $(":checkbox").change(function() { var cnt = $("#person").val(); // 셀렉트박스의 값과 체크박스중 체크된 갯수가 같을때, 다른 체크박스들을 disable 처리 if( cnt==$(":checkbox:checked").length ) { $(":checkbox:not(:checked)").attr("disabled", "disabled"); } // 체크된 갯수가 다르면 활성화 시킴 else { $(":checkbox").removeAttr("disabled"); } }); // 셀렉트박스에서 다른 인원수를 선택하면 초기화 시킴 $("#person").change(function(){ $(":checkbox").removeAttr("checked"); $(":checkbox").removeAttr("disabled"); }); }); </script></head><body> <span>인원수 선택 : </span> <select id="person"> <option value="1">1명</option> <option value="2">2명</option> <option value="3">3명</option> <option value="4">4명</option> <option value="5">5명</option> </select> <table border="1"> <tr> <td><label><input type="checkbox"/>1</label></td> <td><label><input type="checkbox"/>2</label></td> <td><label><input type="checkbox"/>3</label></td> <td><label><input type="checkbox"/>4</label></td> <td><label><input type="checkbox"/>5</label></td> <td><label><input type="checkbox"/>6</label></td> </tr> <tr> <td><label><input type="checkbox"/>7</label></td> <td><label><input type="checkbox"/>8</label></td> <td><label><input type="checkbox"/>9</label></td> <td><label><input type="checkbox"/>10</label></td> <td><label><input type="checkbox"/>11</label></td> <td><label><input type="checkbox"/>12</label></td> </tr> </table></body></html> |
jQuery 를 하면서 매번 느끼는 거지만 jQuery가 없었다면 우쨋을까 하는 생각이 든다. 저런걸 쌩 자바스크립트로 구현할려면..... 암울하기 짝이없다.
나는 jQuery 빠돌히릿~♥
※ IE9 에서 $(":checked") 를 제대로 못가져오는 버그같은게 있는것 같다. $(":checkbox:checked") 로 하니까 해결이 됬다.
2011/11/18 - [jQuery Plugin] - 자작 훌러그인 : jQuery shortcut v0.1 (웹페이지에 단축키 기능을 넣자)
2011/11/18 - [Javascript 예제] - jQuery 로 메뉴 접었다~ 펼쳤다~ 구현하기
2011/11/15 - [Javascript 예제] - jQuery 로 해보는 체크박스(checkbox) 전체선택, 선택해제 예제
2011/11/14 - [Javascript] - 순수 Javascript 로 get 방식으로 넘어온 파라메터 가져오기
2011/11/11 - [Javascript 예제] - jQuery로 테이블 tr 동적으로 추가,삭제 하기 v2
2011/11/18 - [Javascript 예제] - jQuery 로 메뉴 접었다~ 펼쳤다~ 구현하기
2011/11/15 - [Javascript 예제] - jQuery 로 해보는 체크박스(checkbox) 전체선택, 선택해제 예제
2011/11/14 - [Javascript] - 순수 Javascript 로 get 방식으로 넘어온 파라메터 가져오기
2011/11/11 - [Javascript 예제] - jQuery로 테이블 tr 동적으로 추가,삭제 하기 v2
'Javascript 예제' 카테고리의 다른 글
| jQuery로 Outer HTML 가져오기 (2) | 2012.11.06 |
|---|---|
| jQuery 로 페이지를 벗어날때 확인창 띄우기 (1) | 2012.06.08 |
| jQuery 로 메뉴 접었다~ 펼쳤다~ 구현하기 (39) | 2011.11.18 |
| jQuery 로 해보는 체크박스(checkbox) 전체선택, 선택해제 예제 (2) | 2011.11.15 |
| jQuery로 테이블 tr 동적으로 추가,삭제 하기 v2 (33) | 2011.11.11 |
