본문 바로가기
프로그래밍/jQuery

jQuery API 정복 - 폼의 value 가져오기, val()

by zoo10 2011. 3. 17.

.val()

양식(form)에 들어있는 value 들을 제어할 수 있는 함수입니다.

원문 링크 http://api.jquery.com/val/

함수들

val()
  • .val()
val( value )
  • .val( value )
  • .val( function(index, value) )

.attr( attributeName )Returns : String, Array

개요 : 선택된 요소 집합에서 첫번째 요소의 value를 반환한다.

  • .val()

.val() 함수는 양식(form) 요소들의 값을 위해 많이 사용되는 함수입니다. 만일 <select multiple="multiple">라는 태그에 val() 함수를 사용하면 선택된 옵션(option)들의 value를 배열(array)로 반환해 줍니다.

선택박스(select)나 체크(checkbox)에 사용한다면 :selected 나 :checked 선택자들을 이용할 수 있습니다. 예를 들자면

$('select.foo option:selected').val();    // 드롭박스에서 선택된 것을 가져옴
$('select.foo').val();                    // 드롭박스에서 좀더 쉽게 값을 가져옴
$('input:checkbox:checked').val();        // 체크가 된 체크박스의 값을 가져옴
$('input:radio[name=bar]:checked').val(); // 라디오버튼 중 선택된 값을 가져옴

예 제  
드롭박스에서 선택된 것들을 표시해 줍니다. 하나만 선택가능하면 string이 반환되고 여러개가 선택가능하면 선택된 값을 배열로 반환 받습니다.

<!DOCTYPE html>
<html>
<head>
  <style>
  p { color:red; margin:4px; }
  b { color:blue; }
  </style>
  <script src="http://code.jquery.com/jquery-1.5.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);
    displayVals();
 
</script>
 
</body>
</html>

미리보기

오른쪽 드롭박스는 ctrl 키를 누르고 선택하시면 다중 선택이 됩니다.

 

예 제  
텍스트 박스의 값을 가져와서 찍어줍니다.

<!DOCTYPE html>
<html>
<head>
  <style>
 
  p { color:blue; margin:8px; }
  </style>
  <script src="http://code.jquery.com/jquery-1.5.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>

미리보기

input 박스에 키보드를 이용해 텍스트를 변경해 보세요. 값을 가져와서 바로바로 뿌려줍니다. keyup 이벤트가 사용되었네요.

 

.val( value )Returns : jQuery

개요 : 선택자에 의해 선택된 요소에 값을 추가할 수 있습니다.

  • .val( value )
  • value 선택된 요소 집합에 들어갈 문자열이나 배열로 된 새로운 값(value)
  • .val( function(index, value) )
  • function(index, value) 새로 세팅될 값을 반환하는 함수

양식(form)에 새로운 값을 집어 넣을수도 있습니다.

val 함수는 인자로 함수를 이용할 수 있습니다. jQuery 1.4버젼 이후로 이 함수에 현재 요소의 index 와 value를 전달할 수 있게 되었습니다.

$('input:text.items').val(function(index, value) {
  return value + ' ' + this.className;
});

위 예제의 결과는 해당 텍스트 박스의 값에 그 텍스트 박스의 클래스명이 'items'라는 문자열이 추가되어 표현된다는 것입니다.

 

예 제  
버튼의 텍스트를 텍스트 박스에 표시합니다.

<!DOCTYPE html>
<html>
<head>
  <style>
  button { margin:4px; cursor:pointer; }
  input { margin:4px; color:blue; }
  </style>
  <script src="http://code.jquery.com/jquery-1.5.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>
  <script src="http://code.jquery.com/jquery-1.5.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>

미리보기

영어만 된다니까요. ^^ 한글도 대문자가 있던가요?

 

예 제  
드롭박스, 라디오버튼, 체크박스 등에 값을 미리 지정할 수 있습니다.

<!DOCTYPE html>
<html>
<head>
  <style>
  body { color:blue; }
  </style>
  <script src="http://code.jquery.com/jquery-1.5.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>

미리보기

위쪽에 설명을 이쪽으로 내려서 드리자면 이 예제와 같이 문자열 배열을 사용해서 select, radio, checkbox 같은 요소의 value 값을 배열로 전달하면 해당 부분이 선택 또는 체크된 상태가 됩니다. value 를 지정해 넣으면 그 요소의 초기값을 설정할 수 있게 된다는 것입니다. 유용하네요.

 

음, val() 함수는 무지 많이 사용될 것 같습니다. 잘 익혀 두셨다가 유용하게 사용하세요.

그럼 즐프하세요.

※ 본 예제는 http://www.jquery.com 에 있는 내용임을 밝힙니다.

저작자표시 비영리 변경금지 (새창열림)

'프로그래밍 > jQuery' 카테고리의 다른 글

jQuery API 정복 - 현재 요소에서 가장 가까운 선택 요소, closest()  (1) 2011.04.21
jQuery API 정복 - 자식 요소들 찾기, children()  (2) 2011.04.07
jQuery API 정복 - 선택된 요소들 이어 붙이기, andSelf()  (6) 2011.03.24
jQuery API 정복 - 선택요소 확장하기, add()  (2) 2011.03.21
jQuery API 정복 - 클래스 토글하기, toggleClass  (5) 2011.03.15
jQuery API 정복 - 클래스 제거, removeClass()  (2) 2011.03.14
jQuery API 정복 - 속성 제거, removeAttr()  (0) 2011.03.11
jquery API 정복 - innerHTML 과 같은 표현, html()  (10) 2011.03.10

관련글

티스토리툴바