jQuery에는 다양한 셀렉터들이 있다.
이걸 잘 사용하면 쉽게 jQeury 코딩이 가능하다 (Javascript도 사용가능)
이번 포스팅에서는 간단하게 예시로만 설명할것이다.
자세한 내용은 다음 파일을 받아서 보도록 하자
(파일은 압축을 풀면 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">
만 체크가 된다.