KCP API결제 버전 배포 - exec() 불가 환경 대응KCP exec() 불가 대응 버전 배포
이전
목록
다음
아

[jQuery] 입력한 내용에 맞는 체크박스만 보여주기

아샬
프로필 보기게시판 작성글 보기전체 작성글 보기전체 댓글 보기
 · 2011-11-16 (수) 01:34:02 · 3490 · 2
체크 박스 옵션이 많아져서 원하는 걸 찾기 어려울 때 사용하시면 됩니다.

몇 번 언급한 적이 있는 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()


#개발자팁 #개발자 #팁자료실 #jquery
|

댓글 2개

어머깬다
프로필 보기게시판 작성글 보기전체 작성글 보기전체 댓글 보기
 2011-11-17 (목) 16:33:08
[application,coffee] 여기서 , 는 . 이게 맞는거죠?

유용하게 쓰이겠네요 감사합니다.
아샬
프로필 보기게시판 작성글 보기전체 작성글 보기전체 댓글 보기
 2011-11-17 (목) 17:36:53
헉, 마침표가 맞습니다!
댓글을 작성하시려면 로그인이 필요합니다.

프로그램

8,188건
태그 필터 (최대 3개) 전체 개발자 소스 기타 mysql 팁자료실 javascript php linux flash 정규표현식 jquery node.js mobile 웹서버 os 프로그램 강좌 썸네일 이미지관련 도로명주소 그누보드5 기획자 견적서 계약서 기획서 마케팅 제안서 seo 통계 서식 통계자료 퍼블리셔 html css 반응형 웹접근성 퍼블리싱 표준화 반응형웹 홈페이지기초 부트스트랩 angularjs 포럼 스크린리더 센스리더 개발자톡 개발자팁 퍼블리셔톡 퍼블리셔팁 기획자톡 기획자팁 프로그램강좌 퍼블리싱강좌
+
제목 글쓴이 날짜 조회
12-04-26 조회 3,824
12-04-24 조회 3,222
12-04-23 조회 4,552
12-04-22 조회 3,245
12-04-19 조회 3,326
12-04-18 조회 4,383
12-04-18 조회 3,095
12-04-17 조회 3,367
12-04-17 조회 5,125
12-04-16 조회 3,538
12-04-13 조회 3,085
12-04-09 조회 3,155
12-04-04 조회 3,924
12-04-01 조회 3,206
12-03-31 조회 3,596
12-03-30 조회 3,200
12-03-30 조회 3,867
12-03-26 조회 3,478
12-03-26 조회 3,056
12-03-22 조회 3,210
12-03-21 조회 3,067
12-03-19 조회 3,472
12-03-17 조회 3,500
12-03-14 조회 3,234
12-03-10 조회 3,916
12-03-09 조회 3,493
12-03-09 조회 3,323
12-03-08 조회 3,793
12-03-08 조회 3,967
12-03-08 조회 4,057
12-03-03 조회 3,299
12-03-02 조회 4,633
12-02-28 조회 3,169
12-02-27 조회 2,979
12-02-25 조회 3,128
12-02-24 조회 3,836
12-02-23 조회 3,100
12-02-22 조회 3,621
12-02-22 조회 5,395
12-02-22 조회 3,967
12-02-22 조회 4,285
12-02-18 조회 3,774
12-02-17 조회 2,996
12-02-17 조회 3,406
12-02-14 조회 3,478
12-02-13 조회 3,361
12-02-10 조회 1만
12-02-08 조회 3,021
12-02-07 조회 3,359
12-02-06 조회 3,086
12-02-05 조회 3,548
12-01-31 조회 3,473
12-01-30 조회 9,655
12-01-29 조회 3,814
12-01-26 조회 3,416
12-01-25 조회 4,028
12-01-24 조회 3,421
12-01-10 조회 3,733
12-01-10 조회 4,486
12-01-09 조회 3,269
12-01-08 조회 7,129
12-01-08 조회 3,654
12-01-07 조회 5,178
12-01-04 조회 3,887
12-01-02 조회 3,112
12-01-02 조회 3,163
12-01-02 조회 3,468
12-01-01 조회 3,104
11-12-31 조회 3,411
11-12-31 조회 3,087
11-12-30 조회 3,253
11-12-30 조회 3,404
11-12-29 조회 3,618
11-12-28 조회 3,713
11-12-26 조회 3,279
11-12-23 조회 3,502
11-12-22 조회 3,046
11-12-15 조회 4,136
11-12-08 조회 3,953
11-12-05 조회 3,290
11-12-04 조회 5,708
11-12-03 조회 3,569
11-12-02 조회 3,350
11-12-01 조회 5,426
11-11-30 조회 2,913
11-11-30 조회 2,806
11-11-28 조회 3,154
11-11-26 조회 3,334
11-11-25 조회 3,352
11-11-24 조회 2,949
11-11-22 조회 3,039
11-11-22 조회 2,883
11-11-17 조회 2,818
11-11-11 조회 2,818
11-11-09 조회 2,873
11-11-08 조회 3,249
11-11-08 조회 2,543
11-11-04 조회 3,625
11-11-01 조회 2,930
11-10-26 조회 2,518
글쓰기