본문 바로가기
내마음대로만들어보자/JS

prop() 메서드

by 소농민! 2021. 8. 21.
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>