val
. val()은 양식(form)의 값을 가져오거나 값을 설정하는 메서드입니다.
주로 input, select 및 과 같은 양식 요소의 값을 가져오는 데 사용됩니다.
가져오기
이 메서드는 인수를 허용하지 않습니다.
컬렉션의 첫 번째 요소가 select-multiple(즉, 속성이 설정된 select요소 multiple)이면. val() 선택한 각 옵션의 값을 포함하는 배열을 반환합니다.
옵션을 선택하지 않으면 빈 배열이 반환됩니다.
선택, 확인란 및 라디오 버튼의 경우 : checked를 사용하여 올바른 요소를 선택할 수 있습니다.
|
// 드롭다운에서 선택한 옵션에서 값 가져오기
$( "select#foo option:checked" ).val();
// 드롭다운에서 직접 값 가져오기 선택
$( "select#foo" ).val();
// 선택한 checkbox에서 값 가져오기
$( "input[type=checkbox][name=bar]:checked" ).val();
// 라디오 버튼 집합에서 값 가져오기
$( "input[type=radio][name=baz]:checked" ).val();
|
cs |
입력 상자의 값을 찾는 예문입니다.
|
<!doctype html>
<head>
<meta charset="utf-8">
<title>val demo</title>
<style>
p {
color: blue;
margin: 8px;
}
</style>
<script src="https://code.jquery.com/jquery-3.5.0.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>
|
cs |
설정하기
일치하는 요소 집합에서 각 요소의 값을 설정합니다.
| 유형 | 설명 | |
| .val (값) | 문자열 또는 숫자 또는 배열 | 선택된 것으로 설정할 각 일치하는 요소의 값에 해당하는 텍스트 문자열, 숫자 또는 문자열 배열입니다. |
| .val (함수) | 함수 ( 정수 인덱스, 문자열 값) => 문자열 | 설정할 값을 반환하는 함수입니다. 집합에있는 요소의 인덱스 위치와 이전 값을 인수로받습니다. |
val() 요소 값의 배열을 전달할 수 있습니다.
- <input type="checkbox">,
- <input type="radio">
- <option>(A)의 내부 <select>.
이 경우 배열의 요소 중 하나와 일치하는 A 가 있는 input 및 option의 value 확인되거나 선택되고, value배열의 요소 중 일치하지 않는 A 가 있는 값은 선택 취소됩니다.
이 메서드를 사용하거나 기본 value속성을 사용하여 값을 설정해도 change이벤트 가 전달되지 않습니다.
이러한 이유로 관련 이벤트 핸들러가 실행되지 않습니다.
. trigger( "change" )하려면 값을 설정한 후 호출해야 합니다.
. val() 메서드는 함수를 전달하여 값을 설정할 수 있습니다.
함수는 현재 요소의 인덱스와 현재 값의 두 인수를 전달받습니다.
텍스트 창에 쓰여있는 ID를 입력하세요 라는 문구를 val()를 통해서 변경이 가능합니다.
아래의 예문을 적용하면 value값이 '이름을 입력하세요'로 변경이 됩니다.
|
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.0.min.js"></script>
<script type="text/javascript">
$(function () {
$('.text1').val('이름을 입력하세요');
});
</script>
<style>
</style>
</head>
<body>
<input type="text" class="text1" value="ID를 입력하세요" />
</body>
</html>
|
cs |
'Java Script > JQuery' 카테고리의 다른 글
| jQuery 요소 대체하기 (replaceAll/replaceWith) (0) | 2020.11.01 |
|---|---|
| jQuery 많은 수의 속성 추가 (extend) (0) | 2020.11.01 |
| jQuery 클래스 속성 변경 (addClass/hasClass/removeClass) (0) | 2020.11.01 |
| jQuery 객체, 태그 이동 (appendTo/setlnterval) (0) | 2020.11.01 |
| Ajax (0) | 2020.10.31 |
