返回值:String, Number, Arrayval()

取得匹配元素集合中，第一个元素的值。

.val() 方法主要用于取表单元素的值，例如 input, select 和 textarea。像 <select multiple="multiple"> 这样含有多个值的元素,.val() 方法会数组形式，返回每个被选中的选项的值。如果没有选中任何选项，则返回 null。

对于 select 和 checkbox, 可以使用 :selected 和 :checked 选择器来取值。例如： 

$('select.foo option:selected').val();    // get the value from a dropdown select
$('select.foo').val();                    // get the value from a dropdown select even easier
$('input:checkbox:checked').val();        // get the value from a checked checkbox
$('input:radio[name=bar]:checked').val(); // get the value from a set of radio buttons

注意: 到目前为止, 通过 .val() 方法从 textarea 元素中取得的值是不含有回车（\r）字符的。但是如果该值是通过 XHR 传递给服务器的，回车（\r）字符会被保留（或者是被浏览器添加的，但是在原始数据中并不包含回车（\r））。可以使用下面的 valHook 方法解决这个问题： 

$.valHooks.textarea = {
    get: function( elem ) {
        return elem.value.replace( /\r?\n/g, "\r\n" );
    }
};

示例:

从单一列表框和复选列表中取值，并显示选中的值。

<!DOCTYPE html>
<html>
<head>
<style>
  p { color:red; margin:4px; }
  b { color:blue; }
  </style>
<script src="jquery.min.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>

演示:

示例:

取得文本框的值。

<!DOCTYPE html>
<html>
<head>
<style>

  p { color:blue; margin:8px; }
  </style>
<script src="jquery.min.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>

演示:

返回值:jQueryval(value)

为每个匹配的元素设置值。

该方法通常用于设置表单元素的值。

当传递一组需要设置的值时，可以选中多个 <input type="checkbox"> 和 <input type="radio">，也可以选中 <select multiple="multiple"> 中的多个 <option> 元素，其它未被设置的值将会变成未选中状态。

.val() 方法允许我们通过一个函数来设置所需的值。从 jQuery 1.4 开始,这个函数有两个参数，元素的索引位置和原有的值： 

$('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="jquery.min.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="jquery.min.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="jquery.min.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>

演示: