메서드 val
메서드 val는 요소의 현재 값을 얻거나
변경할 수 있게 해줍니다.
구문
다음과 같이 선택된 요소 집합에서 첫 번째 요소의 현재 값을 얻을 수 있습니다:
$(selector).val();
메서드 val는 주로
input,
select
및 textarea와 같은
폼 요소의 값을 얻는 데 사용됩니다.
빈 컬렉션에서 호출되면 undefined를 반환합니다.
multiple 속성이 설정된 select를 다룰 때,
이 메서드는 선택된 각 option의 값 배열을 반환합니다.
하나도 선택되지 않은 경우 빈 배열이 반환됩니다.
다음과 같이 선택된 집합의 각 요소에 값을 설정할 수 있습니다.
매개변수로 문자열, 배열 또는 숫자를 전달할 수 있습니다:
$(selector).val(value);
선택된 집합의 각 요소에 함수를 적용합니다. 함수는 첫 번째 매개변수로 집합 내 현재 인덱스를, 두 번째 매개변수로 해당 요소의 현재 값을 받습니다:
$(selector).val(attribute name, function(index, currentValue));
예제
다음 예제에서 입력 필드에 입력된 값을 가져와 아래 단락에 출력해 보겠습니다:
<input type="text" value="text">
<p></p>
p {
color: green;
margin: 8px;
}
$('input').keyup(function() {
let value = $(this).val();
$('p').text(value);
}).keyup();
예제
이제 val 메서드를 사용하여
누르는 버튼의 텍스트를 아래에 있는 입력 필드에
기록해 보겠습니다:
<div>
<button>one</button>
<button>two</button>
<button>three</button>
<button>four</button>
</div>
<input type="text" value="click buttons">
button {
margin: 4px;
cursor: pointer;
}
input {
margin: 4px;
color: green;
}
$('button').click(function() {
let text = $(this).text();
$('input').val(text);
});
