.val()
양식(form)에 들어있는 value 들을 제어할 수 있는 함수입니다.
원문 링크 
http://api.jquery.com/val/
함수들
val()
- .val()
val( value )
- .val( value )
- .val( function(index, value) )
개요 : 선택된 요소 집합에서 첫번째 요소의 value를 반환한다.
- .val()
.val() 함수는 양식(form) 요소들의 값을 위해 많이 사용되는 함수입니다. 만일 <select multiple="multiple">라는 태그에 val() 함수를 사용하면 선택된 옵션(option)들의 value를 배열(array)로 반환해 줍니다.
선택박스(select)나 체크(checkbox)에 사용한다면 :selected 나 :checked 선택자들을 이용할 수 있습니다. 예를 들자면
$('select.foo option:selected').val(); // 드롭박스에서 선택된 것을 가져옴
$('select.foo').val(); // 드롭박스에서 좀더 쉽게 값을 가져옴
$('input:checkbox:checked').val(); // 체크가 된 체크박스의 값을 가져옴
$('input:radio[name=bar]:checked').val(); // 라디오버튼 중 선택된 값을 가져옴예 제
드롭박스에서 선택된 것들을 표시해 줍니다. 하나만 선택가능하면 string이 반환되고 여러개가 선택가능하면 선택된 값을 배열로 반환 받습니다.
<!DOCTYPE html>
<html>
<head>
<style>
p { color:red; margin:4px; }
b { color:blue; }
</style>
<script src="http://code.jquery.com/jquery-1.5.js"></script>
</head>
<body>
<p></p>
<select id="single">
<option>Single</option>
<option>Single2</option>
</select>
<select id="multiple" multiple="multiple">
<option selected="selected">Multiple</option>
<option>Multiple2</option>
<option selected="selected">Multiple3</option>
</select>
<script>
function displayVals() {
var singleValues = $("#single").val();
var multipleValues = $("#multiple").val() || [];
$("p").html("<b>Single:</b> " +
singleValues +
" <b>Multiple:</b> " +
multipleValues.join(", "));
}
$("select").change(displayVals);
displayVals();
</script>
</body>
</html>
미리보기
오른쪽 드롭박스는 ctrl 키를 누르고 선택하시면 다중 선택이 됩니다.
예 제
텍스트 박스의 값을 가져와서 찍어줍니다.
<!DOCTYPE html>
<html>
<head>
<style>
p { color:blue; margin:8px; }
</style>
<script src="http://code.jquery.com/jquery-1.5.js"></script>
</head>
<body>
<input type="text" value="some text"/>
<p></p>
<script>
$("input").keyup(function () {
var value = $(this).val();
$("p").text(value);
}).keyup();
</script>
</body>
</html>미리보기
input 박스에 키보드를 이용해 텍스트를 변경해 보세요. 값을 가져와서 바로바로 뿌려줍니다. keyup 이벤트가 사용되었네요.
개요 : 선택자에 의해 선택된 요소에 값을 추가할 수 있습니다.
- .val( value )
- value 선택된 요소 집합에 들어갈 문자열이나 배열로 된 새로운 값(value)
- .val( function(index, value) )
- function(index, value) 새로 세팅될 값을 반환하는 함수
양식(form)에 새로운 값을 집어 넣을수도 있습니다.
val 함수는 인자로 함수를 이용할 수 있습니다. jQuery 1.4버젼 이후로 이 함수에 현재 요소의 index 와 value를 전달할 수 있게 되었습니다.
$('input:text.items').val(function(index, value) {
return value + ' ' + this.className;
});위 예제의 결과는 해당 텍스트 박스의 값에 그 텍스트 박스의 클래스명이 'items'라는 문자열이 추가되어 표현된다는 것입니다.
예 제
버튼의 텍스트를 텍스트 박스에 표시합니다.
<!DOCTYPE html>
<html>
<head>
<style>
button { margin:4px; cursor:pointer; }
input { margin:4px; color:blue; }
</style>
<script src="http://code.jquery.com/jquery-1.5.js"></script>
</head>
<body>
<div>
<button>Feed</button>
<button>the</button>
<button>Input</button>
</div>
<input type="text" value="click a button" />
<script>
$("button").click(function () {
var text = $(this).text();
$("input").val(text);
});
</script>
</body>
</html>
미리보기
버튼 클릭하시면 됩니다. 너무 간단해서 뭐~
예 제
텍스트를 집어넣고 탭키를 누르시거나 마우스로 다른 곳을 클릭하시면 텍스트 박스안의 글자가 대문자로 변경됩니다. 당근 영어만 됩니다.
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.5.js"></script>
</head>
<body>
<p>Type something and then click or tab out of the input.</p>
<input type="text" value="type something" />
<script>
$('input').bind('blur', function() {
$(this).val(function(i, val) {
return val.toUpperCase();
});
});
</script>
</body>
</html>
미리보기
영어만 된다니까요. ^^ 한글도 대문자가 있던가요?
예 제
드롭박스, 라디오버튼, 체크박스 등에 값을 미리 지정할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<style>
body { color:blue; }
</style>
<script src="http://code.jquery.com/jquery-1.5.js"></script>
</head>
<body>
<select id="single">
<option>Single</option>
<option>Single2</option>
</select>
<select id="multiple" multiple="multiple">
<option selected="selected">Multiple</option>
<option>Multiple2</option>
<option selected="selected">Multiple3</option>
</select><br/>
<input type="checkbox" name="checkboxname" value="check1"/> check1
<input type="checkbox" name="checkboxname" value="check2"/> check2
<input type="radio" name="r" value="radio1"/> radio1
<input type="radio" name="r" value="radio2"/> radio2
<script>
$("#single").val("Single2");
$("#multiple").val(["Multiple2", "Multiple3"]);
$("input").val(["check1","check2", "radio1" ]);
</script>
</body>
</html>미리보기
위쪽에 설명을 이쪽으로 내려서 드리자면 이 예제와 같이 문자열 배열을 사용해서 select, radio, checkbox 같은 요소의 value 값을 배열로 전달하면 해당 부분이 선택 또는 체크된 상태가 됩니다. value 를 지정해 넣으면 그 요소의 초기값을 설정할 수 있게 된다는 것입니다. 유용하네요.
음, val() 함수는 무지 많이 사용될 것 같습니다. 잘 익혀 두셨다가 유용하게 사용하세요.
그럼 즐프하세요.
※ 본 예제는 http://www.jquery.com 에 있는 내용임을 밝힙니다.
'프로그래밍 > jQuery' 카테고리의 다른 글
| jQuery API 정복 - 현재 요소에서 가장 가까운 선택 요소, closest() (1) | 2011.04.21 |
|---|---|
| jQuery API 정복 - 자식 요소들 찾기, children() (2) | 2011.04.07 |
| jQuery API 정복 - 선택된 요소들 이어 붙이기, andSelf() (6) | 2011.03.24 |
| jQuery API 정복 - 선택요소 확장하기, add() (2) | 2011.03.21 |
| jQuery API 정복 - 클래스 토글하기, toggleClass (5) | 2011.03.15 |
| jQuery API 정복 - 클래스 제거, removeClass() (2) | 2011.03.14 |
| jQuery API 정복 - 속성 제거, removeAttr() (0) | 2011.03.11 |
| jquery API 정복 - innerHTML 과 같은 표현, html() (10) | 2011.03.10 |