체크 박스 옵션이 많아져서 원하는 걸 찾기 어려울 때 사용하시면 됩니다.
몇 번 언급한 적이 있는 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개
14년 전
[application,coffee] 여기서 , 는 . 이게 맞는거죠?
유용하게 쓰이겠네요 감사합니다.
유용하게 쓰이겠네요 감사합니다.
14년 전
헉, 마침표가 맞습니다!
게시판 목록
프로그램
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 4330 |
aequum
|
13년 전 | 823 | |
| 4329 | 13년 전 | 1039 | ||
| 4328 |
aequum
|
13년 전 | 1322 | |
| 4327 |
aequum
|
13년 전 | 1392 | |
| 4326 | 13년 전 | 773 | ||
| 4325 |
aequum
|
13년 전 | 924 | |
| 4324 |
aequum
|
13년 전 | 1645 | |
| 4323 |
aequum
|
13년 전 | 2734 | |
| 4322 |
aequum
|
13년 전 | 1989 | |
| 4321 |
aequum
|
13년 전 | 2054 | |
| 4320 |
aequum
|
13년 전 | 1456 | |
| 4319 |
aequum
|
13년 전 | 1260 | |
| 4318 |
aequum
|
13년 전 | 1160 | |
| 4317 |
aequum
|
13년 전 | 942 | |
| 4316 | 13년 전 | 405 | ||
| 4315 |
Raincommunication
|
13년 전 | 1326 | |
| 4314 |
aequum
|
13년 전 | 4444 | |
| 4313 | 13년 전 | 1301 | ||
| 4312 |
 b1ack |
13년 전 | 1066 | |
| 4311 | 13년 전 | 557 | ||
| 4310 |
후라보노보노
|
13년 전 | 786 | |
| 4309 | 13년 전 | 617 | ||
| 4308 |
levin
|
13년 전 | 500 | |
| 4307 | 13년 전 | 575 | ||
| 4306 | 13년 전 | 560 | ||
| 4305 | 13년 전 | 500 | ||
| 4304 | 13년 전 | 1370 | ||
| 4303 | 13년 전 | 693 | ||
| 4302 | 13년 전 | 542 | ||
| 4301 | 13년 전 | 522 | ||
| 4300 |
내꿈은대통령
|
13년 전 | 577 | |
| 4299 | 13년 전 | 871 | ||
| 4298 | 13년 전 | 777 | ||
| 4297 | 13년 전 | 1368 | ||
| 4296 | 13년 전 | 983 | ||
| 4295 |
원시인교주
|
13년 전 | 3445 | |
| 4294 | 13년 전 | 663 | ||
| 4293 | 13년 전 | 1213 | ||
| 4292 | 13년 전 | 953 | ||
| 4291 | 13년 전 | 2683 | ||
| 4290 |
Kanzi
|
13년 전 | 2295 | |
| 4289 |
393939
|
13년 전 | 503 | |
| 4288 | 13년 전 | 1568 | ||
| 4287 |
393939
|
13년 전 | 518 | |
| 4286 |
alenjoe
|
13년 전 | 2315 | |
| 4285 |
alenjoe
|
13년 전 | 1857 | |
| 4284 | 13년 전 | 470 | ||
| 4283 |
 cshop |
13년 전 | 5560 | |
| 4282 | 13년 전 | 823 | ||
| 4281 | 13년 전 | 1334 | ||
| 4280 | 13년 전 | 1152 | ||
| 4279 | 13년 전 | 1195 | ||
| 4278 | 13년 전 | 1070 | ||
| 4277 | 13년 전 | 1083 | ||
| 4276 |
 Terrorboy |
13년 전 | 930 | |
| 4275 |
스누피사랑
|
13년 전 | 1270 | |
| 4274 |
스누피사랑
|
13년 전 | 1649 | |
| 4273 |
스누피사랑
|
13년 전 | 667 | |
| 4272 |
스누피사랑
|
13년 전 | 1042 | |
| 4271 |
한번잘해보자
|
13년 전 | 2086 | |
| 4270 | 13년 전 | 1936 | ||
| 4269 | 13년 전 | 890 | ||
| 4268 |
mydie
|
13년 전 | 1381 | |
| 4267 | 13년 전 | 3867 | ||
| 4266 | 13년 전 | 600 | ||
| 4265 |
Terrorboy |
13년 전 | 2592 | |
| 4264 |
onlymilk74
|
13년 전 | 1367 | |
| 4263 | 13년 전 | 1804 | ||
| 4262 | 13년 전 | 1018 | ||
| 4261 | 13년 전 | 797 | ||
| 4260 |
 똥싼너구리 |
13년 전 | 801 | |
| 4259 | 13년 전 | 933 | ||
| 4258 |
Terrorboy |
13년 전 | 1021 | |
| 4257 |
Terrorboy |
13년 전 | 1907 | |
| 4256 | 13년 전 | 3144 | ||
| 4255 | 13년 전 | 2185 | ||
| 4254 | 13년 전 | 897 | ||
| 4253 | 13년 전 | 1508 | ||
| 4252 |
 MH코리아 |
13년 전 | 1744 | |
| 4251 | 13년 전 | 556 | ||
| 4250 | 13년 전 | 1793 | ||
| 4249 |
b1ack |
13년 전 | 3034 | |
| 4248 | 13년 전 | 1711 | ||
| 4247 | 13년 전 | 2645 | ||
| 4246 | 13년 전 | 3953 | ||
| 4245 | 13년 전 | 3985 | ||
| 4244 |
아이피마스터
|
13년 전 | 2389 | |
| 4243 |
 미운오리스키 |
13년 전 | 832 | |
| 4242 | 13년 전 | 1122 | ||
| 4241 | 13년 전 | 3942 | ||
| 4240 |
Kanzi
|
13년 전 | 2269 | |
| 4239 |
Kanzi
|
13년 전 | 1416 | |
| 4238 | 13년 전 | 3783 | ||
| 4237 | 13년 전 | 2461 | ||
| 4236 | 13년 전 | 545 | ||
| 4235 | 13년 전 | 2444 | ||
| 4234 | 13년 전 | 603 | ||
| 4233 |
Terrorboy |
13년 전 | 844 | |
| 4232 |
 미스코리아 |
13년 전 | 1675 | |
| 4231 |
미스코리아 |
13년 전 | 1292 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기