728x90
props() 메서드는 선택한 폼 요소(선택 상자, 체크 박스, 라디오 버튼)의 상태 속성값을 가져오거나 새롭게 설정할 때 사용한다.
또한, 선택한 요소의 태그명, 노드타입, 선택 상자의 선택된 옵션의 인덱스 값도 알수 있다.
* 기본형
1) $("요소 선택").prop("[ checked | selected ]"); 2) $("요소 선택").prop("[ checked | selected ]",[ true | false]); 3) $("요소 선택").prop("[ tagName | nodeType | selectedindex | dafaultValue ]"); |
1) 선택한 폼 요소(체크박스, 라디오 버튼, 선택 상자)가 체크된 상태(checked)인지, 선택된 상태(selected)인지 알 수 있다. 예를들어, 선택한 요소가 체크박스(checkbox)이고 체크된 상태에서 prop("checked")를 적용하였다면 true를 아니면 false를 반환한다.
2) 폼 요소(체크박스, 라디오버튼, 선택상자)를 선택하여 체크 또는 선택 상태를 바꿀 수 있다.
3) 선택한 요소의 태그명(tagName)이나 노드타입(nodeType), 선택된 옵션의 인덱스 값을 구한다. 이때 폼 요소에 prop("defaultValue")를 사용하면 사용자가 value 속성 값을 바꿔도 초기의 value 속성값을 가져온다.
* 예제
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title> 객체 조작 및 생성 </title> <script src="js/jquery.js"></script> <script> $(function( ){ var result_1 = $("#chk1").prop("checked"); //id값이 "chk1"인 요소가 체크된 상태이면 true를 반환하여 result_1에 저장한다. console.log(result_1); //false var result_2 = $("#chk2").prop("checked"); console.log(result_2); // true var result_2 = $("#chk3").prop("checked", true); // id값이 "chk3"인 요소의 체크상태를 true로 바꿔준다. var result_3 = $("#se_1").prop("selectedIndex"); //id 값이 "se_1"인 요소의 옵션 중 selected 옵션의 인덱스값을 가져온다. console.log(result_3); //2 }); </script> </head> <body> <h1><strong>객체 조작 및 생성</strong></h1> <form action="#" id="form_1"> <p> <input type="checkbox" name="chk1" id="chk1"> <label for="chk1">chk1</label> <input type="checkbox" name="chk2" id="chk2" checked> <label for="chk2">chk2</label> <input type="checkbox" name="chk3" id="chk3"> <label for="chk3">chk3</label> </p> <p> <select name="se_1" id="se_1"> <option value="opt1">option1</option> <option value="opt2">option2</option> <option value="opt3" selected>option3</option> </select> </p> </form> </body> </html> |
'내마음대로만들어보자 > JS' 카테고리의 다른 글
요소 위치 메서드 - position() / offset() (0) | 2021.08.21 |
---|---|
수치조작메서드 (0) | 2021.08.21 |
val() 메서드 (0) | 2021.08.21 |
addClass() / removeClass() / toggleClass() / hasClass() 메서드 (0) | 2021.08.21 |
attr() / removeAttr() 메서드 (0) | 2021.08.21 |