체크 박스 옵션이 많아져서 원하는 걸 찾기 어려울 때 사용하시면 됩니다.
몇 번 언급한 적이 있는 CoffeeScript를 사용했습니다.
[index.html]
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
<title>Checkbox Filter</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link href="stylesheet.css" media="screen" rel="stylesheet" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script src="http://jashkenas.github.com/coffee-script/extras/coffee-script.js" type="text/javascript"></script>
<script src="application.coffee" type="text/coffeescript"></script>
</head>
<body>
<div id="container">
<form method="post" action="/">
<label for="input-filter">Filter:</label>
<input id="input-filter" type="text" name="filter" />
<ul>
<li>
<input id="id_1" type="checkbox" name="ids[]" value="1" />
<label for="id_1">#1 - AA</label>
</li>
<li>
<input id="id_2" type="checkbox" name="ids[]" value="2" />
<label for="id_2">#2 - BA</label>
</li>
<li>
<input id="id_3" type="checkbox" name="ids[]" value="3" />
<label for="id_3">#3 - AB</label>
</li>
<li>
<input id="id_4" type="checkbox" name="ids[]" value="4" />
<label for="id_4">#4 - BB</label>
</li>
<li>
<input id="id_5" type="checkbox" name="ids[]" value="5" />
<label for="id_5">#5 - ABC</label>
</li>
</ul>
</form>
</div>
</body>
</html>
[stylesheet.css]
body {
font-size: 12px;
background: #FFF;
color: #333;
margin: 0;
}
#container {
margin: 10px auto;
width: 600px;
padding: 10px;
}
[application,coffee]
$ ->
$('form').submit ->
false
$('input[name=filter]').live 'keyup', ->
query = $(this).val().toLowerCase()
if $(query).is(':blank')
$('form li').show()
else
$('form li').each (i, item) ->
text = $(item).find('label').text().toLowerCase()
if text.search(query) < 0
$(item).hide()
else
$(item).show()
몇 번 언급한 적이 있는 CoffeeScript를 사용했습니다.
[index.html]
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
<title>Checkbox Filter</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link href="stylesheet.css" media="screen" rel="stylesheet" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script src="http://jashkenas.github.com/coffee-script/extras/coffee-script.js" type="text/javascript"></script>
<script src="application.coffee" type="text/coffeescript"></script>
</head>
<body>
<div id="container">
<form method="post" action="/">
<label for="input-filter">Filter:</label>
<input id="input-filter" type="text" name="filter" />
<ul>
<li>
<input id="id_1" type="checkbox" name="ids[]" value="1" />
<label for="id_1">#1 - AA</label>
</li>
<li>
<input id="id_2" type="checkbox" name="ids[]" value="2" />
<label for="id_2">#2 - BA</label>
</li>
<li>
<input id="id_3" type="checkbox" name="ids[]" value="3" />
<label for="id_3">#3 - AB</label>
</li>
<li>
<input id="id_4" type="checkbox" name="ids[]" value="4" />
<label for="id_4">#4 - BB</label>
</li>
<li>
<input id="id_5" type="checkbox" name="ids[]" value="5" />
<label for="id_5">#5 - ABC</label>
</li>
</ul>
</form>
</div>
</body>
</html>
[stylesheet.css]
body {
font-size: 12px;
background: #FFF;
color: #333;
margin: 0;
}
#container {
margin: 10px auto;
width: 600px;
padding: 10px;
}
[application,coffee]
$ ->
$('form').submit ->
false
$('input[name=filter]').live 'keyup', ->
query = $(this).val().toLowerCase()
if $(query).is(':blank')
$('form li').show()
else
$('form li').each (i, item) ->
text = $(item).find('label').text().toLowerCase()
if text.search(query) < 0
$(item).hide()
else
$(item).show()
댓글 2개
게시글 목록
| 번호 | 제목 |
|---|---|
| 26049 | |
| 2886 | |
| 14815 |
jQuery
[jQuery] 탭 메뉴
8
|
| 14808 |
jQuery
[jQuery] 상위부터 차례로 지역 선택하기
6
|
| 29814 |
HTML
Loading Panel Widget
|
| 14807 | |
| 2883 | |
| 2879 | |
| 2867 | |
| 2863 | |
| 14798 | |
| 14797 |
JavaScript
메모리 자동 반환 프로그램
|
| 2858 | |
| 14790 | |
| 2852 | |
| 14788 |
MySQL
원격지에 올리기..
1
|
| 14787 |
JavaScript
호스팅업을 하려고 하는데
|
| 2843 | |
| 2838 | |
| 14785 |
JavaScript
주문서에서..
1
|
| 14781 |
MySQL
쿼리문 실행시.
3
|
| 2834 | |
| 14780 | |
| 2830 | |
| 14779 |
기타
특정 url 접근제한
|
| 24227 | |
| 14778 | |
| 29812 |
HTML
도와 주세요
1
|
| 2818 | |
| 14773 | |
| 2815 | |
| 14772 | |
| 29811 | |
| 24214 | |
| 14767 |
PHP
나초보입니다
4
|
| 14762 |
jQuery
죄송하지만JQuery가 몬가요
4
|
| 14760 | |
| 14758 | |
| 24212 | |
| 26043 |
기획서
개발일정 간트차트
5
|
| 14757 |
JavaScript
[유용한팁]Kisa OpenAPI Whois 정보 (XML) 데이터 파싱하기
|
| 2807 | |
| 2791 | |
| 2783 | |
| 14755 |
JavaScript
스크립트좀짜주세용 ^___^
1
|
| 14753 |
MySQL
Mysql Error Num : 1045
1
|
| 2774 | |
| 2767 | |
| 14749 |
jQuery
selector 연습장
3
|
| 2756 | |
| 2751 | |
| 2750 | |
| 14748 |
정규표현식
정규표현식 샘플등 연습장(Air 웹기반)
|
| 14747 | |
| 29809 | |
| 29808 | |
| 29807 | |
| 14746 |
JavaScript
[유용한팁][콤보박스]자바스크립트로 콤보박스에 항목 동적으로 추가하기
|
| 29806 | |
| 29804 | |
| 29802 |
HTML
툴바 프로그램개발할때....
1
|
| 2740 | |
| 2732 | |
| 14745 | |
| 26037 | |
| 26031 |
계약서
사이트 계약서-별첨
5
|
| 2726 | |
| 29797 |
HTML
코드 잘 모르는 이가 질문
4
|
| 2724 | |
| 2712 | |
| 2692 | |
| 14742 |
JavaScript
문자열 자르기 질문드립니다.
2
|
| 14741 |
MySQL
MySQL PHP API Functions
|
| 14740 | |
| 14739 |
기타
Apache C API
|
| 14737 |
jQuery
jQuery 1.6.4 lib
1
|
| 29795 | |
| 2687 | |
| 14732 | |
| 26025 | |
| 14730 |
Flash
자바 관련 사이트 모음 입니다.
1
|
| 26020 | |
| 26017 | |
| 14729 | |
| 14723 |
jQuery
[질문] ie7의 웹페이지 로딩(렌더링)문제.
5
|
| 14722 |
jQuery
문의하나드립니다ㅠㅠ
|
| 2680 | |
| 26009 |
계약서
사이트 제작 계약서
7
|
| 24211 | |
| 14721 | |
| 2677 | |
| 14720 | |
| 14715 | |
| 2660 | |
| 14711 | |
| 14704 | |
| 2657 | |
| 2653 | |
| 14703 |
MySQL
서버 APM정보
|
| 14701 |
JavaScript
가격뽑기 및 질문 ㅎㅎ
1
|
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기