테스트 사이트 - 개발 중인 베타 버전입니다
SIR

jQuery Filter - 폼 필터 Form Filter

jinmuk
프로필 보기이 회원 글보기
 · 12년 전 · 3621

폼 필터
폼 필터는 형식(text, checkbox, password, radio, file)을 기반으로 하는 폼 요소를 선택할 때 사용하는 필터로 사용법은 필터와 동일하여, 자세한 설명보다는 아래의 표로 대신 합니다.

 

 폼 필터 종류

 선택 폼

:button

<input type=”butto” />

:checkbox

<input type=”checkbox” />

:checked

<input type=”checkbox” checked=”checked” />

:disabled

<input type=”text” disabled=”disabled” />

:enabled

<input type=”text” enabled=”enabled” />

:file

<input type=”file” />

:focus

(1.6 이상에서 지원)

:image

<input type=”image” />

:input

<input> 모든 input 요소

:password

<input type=”password” />

:radio

<input type=”radio” />

:reset

<input type=”reset” />

:selected

<select><option selected="selected"></option></select>

:submit 

<input type=”submit” />

:text

<input type=”text” />

:hidden

<input type=”hidden” />

표 1. [jQuery 폼 필터의 종류]
 
표에서 보듯이 폼 필터 사용은 매우 간단하여 자세한 설명을 생략하고 필터 중 상태를 체크하는 필터에 대해 알아 보도록 하겠습니다.
 
 
 
:checked , :selected
<input type=”checkbox”/>체크박스, 라디오버튼<input type=”radio” />, 셀렉트<select>의 상태를 확인 하여 선택된 상태 요소들의 집합을 선택 반환합니다.   
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>jQuery Selector</title>
    <link href="../Styles/Site.css" rel="stylesheet" type="text/css" />    
    <style>
        div,pre { background : #FFF; padding:10px; margin:10px; }
        table { border:1px solid #AAA; }
        td { border:1px solid #AAA; width:25px; height:25px; }
    </style>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $(":checked,:selected").css("border", "2px solid red");
            $(":selected").css("background", "red");
        });
    </script>
</head>
<body style="padding:10px;">
    <h2>jQuery 시작 Selector</h2>
    <p>jQuery에 대한 자세한 내용을 보려면 jquery.com 을 방문하세요.</p>
    <div>
        <ul>
            <li><input type="checkbox" checked="checked" />CheckBox #1 - </li>
            <li><input type="checkbox" />CheckBox #2</li>
            <li><input type="checkbox" checked="checked" />CheckBox #3</li>
        </ul>
        <select multiple="multiple">
            <option>Option #1</option>
            <option selected="selected">Option #2</option>
            <option>Option #3</option>            
        </select>
    </div>
</body>
</html>

[예제 1. 폼필터의 사용예제]

 

 

06_007.jpg
[예제 1 Selected, Checked를 폼 필터를 이용한 결과 모습]
 
 
 
:enabled, :disabled
사용이 가능하거나, 사용이 불가능한 요소를 선택하여 해당 요소의 집합을 반환합니다.
<input type="text" disabled="disabled" />의  경우 :disabled로, 일반적인 모습일 경우 :enabled로 관련 요소의 집합을 선택 할 수 있습니다.
 
목록
이전글 다음글

댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

게시글 목록

번호 제목
17927
오라클 무료 티어 또는 AWS 대한민국 리전에서 클라우드플레어 사용시 사이트 속도 느림
17926
간단한 스크롤 진행률 표시기 구현하기 2 2
17922
간단한 스크롤 진행률 표시기 구현하기 4
17921
nprogress bar&Circle 수정본 입니다.
17915
도커(docker) 웹관리 프로그램인 dockge 설치 및 사용방법 7
17910
aws라이트세일에 그x보드 설치 5
17907
2개 이상의 button 누르면 각 ifrme 으로 페이지 열기 3
17892
불펌금지 자바스크립트 18
17888
러시아 이용자들을 효과적으로 차단하기 8
17879
그누보드 폰에서 돌리기 (Termux) 19
17878
F12 키를 쉽게 비활성화 시키기 2
17874
JavaScript 글자수 제한 가장 쉬운판.중 하나
17873
OS aws 아이피 모조리 차단하기 -웹호스팅 사용자는 불가- 1
17872
PHP 포럼 출력소스 [ 샘플본 ]
17871
PHP 게시판별 카테고리 만들기.
17870
PHP 댓글이나 답글은 로직이 같다.
17869
PHP 카테고리 만드는 예제.
17868
PHP 엑셀로 EXPORT 할때 사용하기 좋은 방법
17866
JavaScript 문구 복사하기 자바스크립트
17865
PHP 그룹의 그룹내 사용자가 전체 메시지 보내기.
17864
PHP 사용자 그룹 통합 해제(해제는 삭제)
17863
PHP 랜덤값 만들기 겹치기는
17862
PHP 만들고 보니 카톡의 단톡방 톡방 패러디 .....
17859
PHP 그누보드로 다중검색을 구현해보니..
17856
정규표현식 정규표현식 쉽게 이해하는 방법 좀 가르켜주세요
17845
JavaScript 페이지 로딩 애니메이션
17835
PHP docker 활용한 php 환경 구성 10
17834
PHP 데이타 1개 가져오기 5
17826
PHP 제목(wr_subject)를 안짤리게 하려면..
17823
node.js 사진에서 배경을 제거하고 다른 배경이미지와 합성하는 서비스 5
이전 다음
전체 목록