본문으로 바로가기

jQuery에는 다양한 셀렉터들이 있다.

이걸 잘 사용하면 쉽게 jQeury 코딩이 가능하다 (Javascript도 사용가능)

이번 포스팅에서는 간단하게 예시로만 설명할것이다.

자세한 내용은 다음 파일을 받아서 보도록 하자


SELECTOR.zip

(파일은 압축을 풀면 SELECTOR 폴더안에 index.html만 키면 모든 내용을 확인할 수 있다)


지금 부터 내가 설명하고자 하는 다중 셀렉터와 해당 속성의 값이 주어진 값으로 시작되면 선택 된다는 ^기호를 사용하는 것을 보여주고자 한다.


만약 다음과 같이 체크박스가 4개가 있다.


<input type="checkbox" name="postData" id="Name1" class="CheckBox">
<input type="checkbox" name="postData" id="Phone1" class="CheckBox">

<input type="checkbox" name="postData" id="Name2" class="CheckBox">
<input type="checkbox" name="postData" id="Phone2" class="CheckBox">

<input type="checkbox" name="postData" id="Name3" class="CheckBoxOther">
<input type="checkbox" name="postData" id="Phone3" class="CheckBoxOther">

이 중에 1) Class가 CheckBox이며,

           2) id가 Name이라는 문자열로 시작하는 input 박스를 체크하기를 원한다.


그렇다면, Jqeury 소스는 다음과 같아진다.

$('input[id^="Name"][class="CheckBox"]').attr('checked', true); 

    Name으로 시작하는 id     CheckBox가 class   

: 두 조건을 모두 만족하는 input tag (다중 셀렉터) 


하면 

<input type="checkbox" name="postData" id="Name1" class="CheckBox">
<input type="checkbox" name="postData" id="Name2" class="CheckBox">

만 체크가 된다.