Develope/jQuery
jQuery Value값 가져오기,설정하기//Val()
친절한 웬디양~ㅎㅎ
2010. 12. 21. 14:12
반응형
태그속성의 값중 Value는 굉장히 중요한 값을 가집니다.
특히 대표적으로 많이 사용되는곳이 텍스트박스(input type="text")의 내용값이나
라디오버튼, 드롭다운리스트의 value값에서 중요하게 사용됩니다.
.val()메서드를 이용하면 입력받은 value값을 가져오거나 원하는 value값으로 set이 가능합니다.
set의 용도로 사용할때는
$('타겟지정코드').val("set하고싶은 value값");
이 형태로 사용하시면되고,
get의 용도로 사용하실때는
var msg = $('타겟지정코드').val();
이런 형식으로 사용하시면 됩니다.
이하 예제코드와 그 결과입니다.
예제에서
.join("원하는 구분모양")
이라는 메서드가 사용되었는데 이 메서드는 get해온값이 여러가지일때
그 구분자로써 사용되게됩니다.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>폼 요소의 값 가져오기 및 설정</title>
<script src="jquery-1.3.2-vsdoc2.js" type="text/javascript "></script>
<script type="text/javascript ">
$(document).ready(function () {
//val을 이용한 초기설정 잡기(좋다!)
$('#txtName').val("뿌요뿌요");
$('input:radio:').val(['F']);
$('#lstFavorites').val(['0','2']);
$('#btnOK').click(function () {
var msg = "";
//1 타겟 폼요소의 value속성을 가져온다. <>에러
msg += $('#txtName').val() + '\n';
//2 라디오버튼중 이름이 Gender이고 체크된 타겟의 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">JavaScript </option>
</select><br />
<input type="submit" value="확인" id="btnOK" />
</body>
</html>
반응형