.val()
요약
선택된 엘리먼트 그룹 중 첫번째 엘리먼트의 값(value)를 반환한다.
문법
.val()
인자
없음
버전
1.0
반환값
string 이나 array
설명
선택된 엘리먼트 그룹 중 첫번째 엘리먼트의 값(value)를 리턴한다. 특히 폼(form)의 컨트롤에 설정된 값을 구하는데 주로 사용된다. 대상이 select 엘리먼트고 다중선택이 가능하다면(<select multiple="multiple">) .val() 메소드는 선택된 옵션이 포함된 배열을 리턴한다. 구체적인 사용법은 아래와 같다.
$('select.foo option:selected').val(); // dropdown 컨트롤 중 선택된 option의 값을 구한다.
$('select.foo').val(); // 위와 동일하지만 보다 간결하고, 편리하다.
$('input:checkbox:checked').val(); // 체크박스의 값을 구한다.
$('input:radio[name=bar]:checked').val(); // 라디오 버튼의 값을 구한다.
예제
다음 예제는 select 엘리먼트를 선택했을 때 선택된 상태를 p엘리먼트에 표시해준다. 눈여겨 볼 것은 하나만 선택 가능한 <select >가 문자열을 리턴하고, 다중선택이 가능한 <select multiple="multiple">가 배열을 리턴하는데, 이에 따라 이 값을 처리하는 방법이 다른 점에 유의하자.
참고 : join의 사용법
<!DOCTYPE html>
<html>
<head>
<style>
p { color:red; margin:4px; }
b { color:blue; }
</style>
<script src="http://code.jquery.com/jquery-latest.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); // select엘리먼트가 사용자에 의해서 선택 되었을 때 displayVals 메소드가 호출된다.
displayVals();
</script>
</body>
</html>
예제
input 엘리먼트에서 사용자가 키를 누르고 떼었을 때 p엘리먼트에 그 값이 표시된다.
<!DOCTYPE html>
<html>
<head>
<style>
p { color:blue; margin:8px; }
</style>
<script src="http://code.jquery.com/jquery-latest.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>
.val(value)
요약
선택된 엘리먼트 그룹 전체에 대해서 지정한 값(value)을 설정한다.
문법
.val(value)
인자
| 인자명 | 데이터형 | 필수/옵션 | 설명 |
|---|---|---|---|
| value | String or Array | 필수 | 단일 선택을 해야하는 콘트롤은 문자열을 인자로하고, 다중 선택을 할 수 있는 selected나 checked를 설정한다. |
버전
1.0
반환값
jQuery wrapper object
설명
선택된 엘리먼트 전체의 값을 변경한다. 이 메소드는 주로 form에서 사용되는 콘트롤(control)에 설정된 값을 변경하는데 사용된다.
엘리먼트 값들을 배열로 넘겨주면, <input type="checkbox">, <input type="radio"> 과 선택하려고 하는 <select multiple="multiple"> 내의 <option>들을 일치시킬 수 있다. 라디오 버튼 그룹에 속한 <input type="radio">들과 <select multiple="multiple">의 경우, 전달된 값들에 해당하지 않는 엘리먼트들은 선택이 해제될 것이다.
예제
버튼을 클릭하면 버튼의 html contents 값을 input 엘리먼트의 값으로 지정한다.
<!DOCTYPE html>
<html>
<head>
<style>
button { margin:4px; cursor:pointer; }
input { margin:4px; color:blue; }
</style>
<script src="http://code.jquery.com/jquery-latest.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>
<style>
body { color:blue; }
</style>
<script src="http://code.jquery.com/jquery-latest.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>
.val( function(index, value) )
요약
선택된 엘리먼트 그룹의 값을 변경한다. 이 때 첫번째 인자로 전달한 함수가 호출되면서 보다 정교하게 값을 제어할 수 있다.
문법
.val(function(index, value){
return value;
})
인자
| 인자명 | 데이터형 | 필수/옵션 | 설명 |
|---|---|---|---|
| function | Function | 필수 | 값을 리턴하는 함수. 함수 내에서의 current는 현재 실행중인 엘리먼트를 의미한다. |
| index | Number | 옵션 | 현재 실행되고 있는 엘리먼트가 선택된 엘리먼트 그룹 중 몇번째인가를 알려주는 index |
| value | String | 옵션 | 현재 실행되고 있는 엘리먼트의 값 |
버전
1.4
반환값
jQuery wrapper object
설명
선택된 엘리먼트 전체의 값을 변경한다. 이 때 첫번째 인자로 전달되는 함수가 리턴하는 값에 따라 각 엘리먼트의 값이 변경된다. 함수의 첫번째 인자인 index는 현재 실행되고 있는 엘리먼트가 선택된 엘리먼트 그룹 중 몇번째인지를 의미하고, value는 현재 실행되고 있는 엘리먼트의 값을 제공한다 .
$('input:text.items').val(function(index, value) {
return value + ' ' + this.className;
});
예제
input 엘리먼트의 값을 해당 엘리먼트의 값을 대문자로 변환한 값으로 변경
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.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>
