Attributes - 폼 요소의 값 가져오기 및 설정
.NET프로그래밍/jQuery 1.3.2 2009. 11. 10. 10:40 |
[Val.htm]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>폼 요소의 값 가져오기 및 설정</title>
<script src="../js/jquery-1.3.2-vsdoc2.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
// Initialize(-> 값(value)을 초기화)
$('#txtName').val("RedPlus"); // 단일값
$('input:radio').val(['F']); // 다중값 : []
$('#lstFavorites').val(['0', '2']); // 다중값 : [,]
$('#btnOK').click(function() {
var msg = "";
//[1] 반드시 폼 요소의 value 속성을 가져온다. <> 에러
msg += $('#txtName').val() + '\n';
//[2] 라디오버튼의 체크된 value 속성을 가져옴 <> undefined
msg += $('input:radio[name=Gender]:checked').val() + '\n';
//[3] 리스트박스에서 여러개 값 가져오기
msg += $('#lstFavorites').val().join(" | ") + '\n';
//[!]
alert(msg);
});
});
</script>
</head>
<body>
텍스트박스 : <input type="text" id="txtName" /><br />
라디오버튼 :
<input type="radio" id="optGender1" name="Gender" value="M" />남
<input type="radio" id="optGender2" name="Gender" value="F" />여<br />
드롭다운리스트 :
<select id="lstFavorites" multiple="multiple" size="3">
<option value="0">JavaScript</option>
<option value="1">jQuery</option>
<option value="2">Prototype</option>
</select><br />
<input type="button" value="확인" id="btnOK" />
</body>
</html>
-------------------------------------------------------------------------------------
[실행결과]
--> 첫 화면. 아래그림에서 '텍스트박스'와 '라디오버튼'과 '드롭다운리스트'가 [Val.htm]소스코드에서 설정한 값(Value)으로 초기화(Initialize)되어있는 것을 볼 수 있다.
--> '텍스트박스', '라디오버튼', '드롭다운리스트'에 각각 값(Value)을 재입력한 후 '확인'버튼을 누르면, 아래그림과 같이 메시지박스에 입력한 값(Value)이 출력되는 것을 볼 수 있다.
'.NET프로그래밍 > jQuery 1.3.2' 카테고리의 다른 글
| Traversing - 지정된 표현식이 있는지 없는지 검사 (0) | 2009.11.10 |
|---|---|
| Traversing - n번째 요소 가져오기 (0) | 2009.11.10 |
| Attributes - 텍스트 값 가져오기 및 설정 (0) | 2009.11.10 |
| Attributes - 특정 속성을 지우기 (0) | 2009.11.10 |
| Attributes - 맵(컬렉션)으로 다중 속성 지정 (0) | 2009.11.10 |