A> 필터 형태
1.기본 형태
$(#아이디:속성)
--예시1 $('#formButton:button')
2.체크박스에서 활용
$('input[name="이름값"]:checkbox:checked') --이름값을 가진 input 중 체크된 체크박스
체크된 값 가져오기
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
$(document).ready(function(){
$('#selectBtn:button').click(function(){
var checkedList = '';
var checkedConsole = '';
$('input[name="hobby"]:checkbox:checked').each(function(){
checkedList += $(this).prev().text() + '\t';
checkedConsole += $(this).prev().text() + '\t';
console.log($(this));
});
$('#contents').html(checkedList);
console.log(checkedConsole);
});
});
|
cs |
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<body>
<div>
<span class="item"> 음악감상 </span>
<input type="checkbox" name="hobby" value="music">
</div>
<div>
<span class="item"> 요가 </span>
<input type="checkbox" name="hobby" value="yoga">
</div>
<div>
<span class="item"> 독서 </span>
<input type="checkbox" name="hobby" value="reading">
</div>
<div>
<input type="button" id="selectBtn" value="취미 선택"></div>
<div id="contents"> 결과 </div>
</body>
|
cs |
html이 이렇게 되어 있을때
6라인처럼 prev()를 쓰는 이유는
checkedList += $(this).prev().text() 3, 7 , 11 라인의 item 을 가져오기 위함이다.
3.메소드
attr(속성이름) -- 속성의 값 얻어오기
attr(속성 이름,값) -- 속성에 대한 새로운 값 설정
val() --값을 얻어오기
prev() -- 형제 엘리먼트 중 바로 이전의 엘리먼트 집합을 반환
html(htmlString) --html문자열을 지정하면 선택한 엘리먼트의 기존 내용을 새로운 내용으로 대체
--innerHTML 이라고 생각하면 된다.
'언어 > javascript' 카테고리의 다른 글
| jQuery3 --DOM 탐색 (0) | 2021.02.16 |
|---|---|
| jQuery3 --attribute 다루기 (0) | 2021.02.16 |
| jquery1 --기본 선택자 (0) | 2021.02.15 |
| javascipt - 웹 워커(web worker) (0) | 2021.02.15 |
| BOM (0) | 2021.02.15 |