32.jQuery - Val ( 03.Attributes - 06.Val.htm )
| 06.Val.htm |
|
<html xmlns="http://www.w3.org/1999/xhtml"> <head>
<title>폼 요소의 값 가져오기 및 설정</title>
<script src="../jQuery/jquery-1.3.2-vsdoc2.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function()
{ //[4] Init초기값 세팅 $('#txtName').val("Godffs"); $('input:radio').val(['F']); //input 타입중 라디오에 대해서 값을 F로 설정 $('#lstFavorites').val(['0', '2']); $('#btnOK').click(function() { var
msg = ""; //[1] 텍스트에 입력한 값 읽어오기 msg += $('#txtName').val() + '\n'; //[2] 채크된 값을 읽어오기 msg += $('input:radio[name=Gender]:checked').val() + '\n'; //[3] 리스트박스에서 여러개 값 가져오기 //msg +=
$('#lstFavorites').val() + '\n'; 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> |
| 결과화면 |
[그림32-1] |
06.Val.htm