.val()

jQuery Reference

.val()은 input, select, textarea의 현재 값을 읽거나 설정합니다. 인수 없이 호출하면 첫 요소의 값만 읽고, 값을 전달하면 선택한 모든 입력 요소에 적용합니다.

문법과 적용 범위

const name = $("#name").val();
$("#name").val("홍길동");
$("#topics").val(["html", "css"]);

일반 입력칸은 문자열을 반환하고, multiple이 있는 select는 선택한 option 값들의 배열을 반환합니다. jQuery 3.0 이상에서는 선택이 없는 다중 select의 결과가 빈 배열입니다. 빈 jQuery 집합에서 읽으면 undefined가 나옵니다. 체크박스의 .val()은 체크 여부가 아니라 value이므로, 체크 여부는 .prop("checked")로 확인하거나 :checked로 범위를 정합니다.

jQuery 공식 문서의 .val() 정의와 인수에서 다른 호출 형태도 확인할 수 있습니다.

전체 실행 예제

아래 코드를 UTF-8 형식의 example.html 파일로 저장한 뒤 브라우저로 여세요. 예제는 jQuery 4.0.0 일반 빌드를 외부 주소에서 불러오므로 인터넷 연결이 필요합니다. 문서가 준비된 뒤 실행하도록 $(function () { ... }) 안에 코드를 작성했습니다.

<!doctype html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery val 예제</title>
  <style>
    body { margin: 24px; font-family: sans-serif; line-height: 1.6; }
    .marked { background: #fff0b3; border: 2px solid #835b00; }
    .active { color: #a00000; font-weight: bold; }
    button, input, select { font: inherit; }
    #output { white-space: pre-wrap; overflow-wrap: anywhere; }
  </style>
  <script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
</head>
<body>
<label for="name">이름</label><input id="name" value="초기 이름">
<label for="topics">관심 주제</label>
<select id="topics" multiple>
  <option value="html">HTML</option>
  <option value="css">CSS</option>
  <option value="jquery">jQuery</option>
</select>
<button id="fill" type="button">값 설정</button>
  <p id="output" aria-live="polite"></p>
  <script>
    $(function () {
      $("#name, #topics").on("change", function () {
        $("#output").text("이름: " + $("#name").val() + " / 주제: " + JSON.stringify($("#topics").val()));
      });
      $("#fill").on("click", function () {
        $("#name").val("홍길동");
        $("#topics").val(["html", "css"]).trigger("change");
      });
    });
  </script>
</body>
</html>

실행 결과 확인

값 설정을 누르면 이름은 홍길동, 선택 항목은 HTML과 CSS로 바뀝니다. 결과에는 이름: 홍길동 / 주제: ["html","css"]가 표시됩니다. .trigger("change")가 결과 표시 핸들러를 실행합니다.

공백을 제거해 다시 설정하기

$("#name").val(function (index, value) {
  return value.trim();
});

함수 형태는 각 요소의 인덱스와 현재 값을 받아 새 값을 반환합니다. 사용자의 입력을 바꾸는 작업이므로, 공백이 의미 있는 비밀번호 같은 항목에 일괄 적용하지 마세요.

사용할 때 주의할 점

.val(값)만 호출하면 change 이벤트가 자동 발생하지 않습니다. 후속 처리가 이벤트에 연결돼 있으면 필요한 요소에서 .trigger("change")를 호출하세요.
여러 체크박스의 값을 모으려면 :checked로 고른 후 .map(function () { return this.value; }).get()을 사용합니다. 여러 요소를 선택해 .val()만 호출하면 첫 요소의 값만 얻습니다.
텍스트 입력칸의 숫자도 문자열일 수 있으므로 계산 전에 Number() 등으로 변환하고 빈 값·유효하지 않은 입력을 검사하세요.
placeholder는 값이 아니며, .val("")는 입력값을 비우는 동작입니다. 기본 HTML value 속성과 사용자가 바꾼 현재 값은 다를 수 있습니다.

용도를 비교하려면 .attr()와 현재 값의 차이을 참고하세요.

jQuery Reference