jQuery Filter - 폼 필터 Form Filter

jinmuk

· 12년 전 · 조회 1551 1551

폼 필터
폼 필터는 형식(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. 폼필터의 사용예제]

[예제 1 Selected, Checked를 폼 필터를 이용한 결과 모습]

:enabled, :disabled
사용이 가능하거나, 사용이 불가능한 요소를 선택하여 해당 요소의 집합을 반환합니다.
<input type="text" disabled="disabled" />의 경우 :disabled로, 일반적인 모습일 경우 :enabled로 관련 요소의 집합을 선택 할 수 있습니다.

댓글 작성

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

로그인하기

게시판 목록

팁게시판

디자인과 관련된 유용한 정보를 공유하세요.
질문은 상단의 QA에서 해주시기 바랍니다.

글쓰기

번호	제목	글쓴이	날짜	조회
5102	웹 표준과 접근성, 그리고 크로스브라우징2 [6] #퍼블리셔 #웹접근성	블랙스완 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	3466
5101	웹 표준과 접근성, 그리고 크로스브라우징1 [2] #퍼블리셔 #웹접근성	블랙스완 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	2516
5100	스크립트오류 제거 [1] #개발자 #javascript	senseme 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	1836
5099	간단한 쿠키지원 팝업 스크립트 [1] #개발자 #javascript	senseme 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	1533
5098	PHP 소스코드 온라인으로 실행해 볼 수 있는 곳입니다. #개발자 #기타	senseme 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	1520
5097	대소문자변환 #개발자 #javascript	senseme 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	1279
5096	메시지 안뜨는 오른쪽 마우스 금지소스 [2] #개발자 #기타	senseme 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	1674
5095	계정(HDD) 사용량 출력하기 [1] #개발자 #php	senseme 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	1355
5094	홈페이지 브라우저 크기 고정시키기 [2] #개발자 #javascript	senseme 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	2417
5093	iframe 아이프레임 투명처리 [2] #개발자 #javascript	senseme 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	1614
5092	CANVAS, SVG, VML 통합 라이브러리 jQuery, MooTools, YUI3 [1] #개발자 #기타	senseme 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	2223
5091	금액 입력시 자동으로 천단위구분기호(,) 붙여주는 함수 #개발자 #javascript	senseme 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	2110
5090	자바스크립트 폼체크에서 해방되세요// [1] #개발자 #php	senseme 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	1748
5089	출생년도에 따른 나이 계산 자바스크립트 [1] #개발자 #javascript	senseme 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	4527
5088	사이트에 구글번역 붙이기. [3] #개발자 #기타	senseme 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	2667
5087	네이버 지도 주소에서 간단히 사이트에 구현하기 #개발자 #기타	senseme 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	2822
5086	iframe에서 페이지를 닫을 때 [1] #개발자 #javascript	senseme 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	1232
5085	iframe 높이 자동조절 스크립트 [6] #개발자 #javascript	senseme 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	8505
5084	자바스크립트 인공지능 장기게임-Minimax #개발자 #javascript	senseme 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	3317
5083	금액을 한글로 표기 해주는 스크립트; [1] #개발자 #javascript	senseme 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	2658
5082	전화번호 입력시 자동 하이픈 넣기 [1] #개발자 #javascript	senseme 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	5308
5081	사업자번호체크스크립트 간단버전 [1] #개발자 #javascript	senseme 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	3381
5080	홈페이지 제작 견적서 [14] #기획자 #견적서	위토즈 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	13280
5079	ios 에서 input 스타일 초기화 [5] #퍼블리셔 #css	지운아빠 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	3886
5078	플러그인 만들기 간단 예제 [2] #개발자 #jquery	개판 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	1457

웹 표준과 접근성, 그리고 크로스브라우징2 [6]

#퍼블리셔 #웹접근성

블랙스완

jQuery Filter - 폼 필터 Form Filter

댓글 작성

게시판 목록

팁게시판

웹 표준과 접근성, 그리고 크로스브라우징2 [6]

웹 표준과 접근성, 그리고 크로스브라우징1 [2]

스크립트오류 제거 [1]

간단한 쿠키지원 팝업 스크립트 [1]

PHP 소스코드 온라인으로 실행해 볼 수 있는 곳입니다.

대소문자변환

메시지 안뜨는 오른쪽 마우스 금지소스 [2]

계정(HDD) 사용량 출력하기 [1]

홈페이지 브라우저 크기 고정시키기 [2]

iframe 아이프레임 투명처리 [2]

CANVAS, SVG, VML 통합 라이브러리 jQuery, MooTools, YUI3 [1]

금액 입력시 자동으로 천단위구분기호(,) 붙여주는 함수

자바스크립트 폼체크에서 해방되세요// [1]

출생년도에 따른 나이 계산 자바스크립트 [1]

사이트에 구글번역 붙이기. [3]

네이버 지도 주소에서 간단히 사이트에 구현하기

iframe에서 페이지를 닫을 때 [1]

iframe 높이 자동조절 스크립트 [6]

자바스크립트 인공지능 장기게임-Minimax

금액을 한글로 표기 해주는 스크립트; [1]

전화번호 입력시 자동 하이픈 넣기 [1]

사업자번호체크스크립트 간단버전 [1]

홈페이지 제작 견적서 [14]

ios 에서 input 스타일 초기화 [5]

플러그인 만들기 간단 예제 [2]