jQuery 사전

jQuery API 레퍼런스를 번역한 것입니다.

jQuery 사전 jQuery API 레퍼런스를 번역한 것입니다.

val

.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>

참고

댓글

댓글 본문
버전 관리
egoing
현재 버전
선택 버전
graphittie 자세히 보기