.val()

类别：特性 | 表单 | 文档处理 > 一般特性
取得匹配的元素集合中每一个元素的当前值，或者设置每个匹配的元素的值。

内容：

.val()返回类型：String or Number or Array

描述：取得匹配的元素集合中每一个元素的当前值。

  • 增补版本：1.0.val()

    • 此方法不接受任何参数。

.val()方法主要用来取得表单元素，譬如input、select和textarea的值。如果在空集合上调用它，就返回undefined。

如果集合中的第一个元素是一个多选元素（亦即，一个<select>元素，设置了multiple特性），则.val()返回一个数组，包含了每个选中的选项的值。自从jQuery 3.0以来，如果没有选中选项，它返回一个空数组；在jQuery 3.0以前，它返回null。

对于下拉选框、勾选框和单选钮，你可以使用:checked来选择正确的元素。例如：

1
2
3
4
5
6
7
8
9
10
11
 
// Get the value from the selected option in a dropdown
$( "select#foo option:checked" ).val();
 
// Get the value from a dropdown select directly
$( "select#foo" ).val();
 
// Get the value from a checked checkbox
$( "input[type=checkbox][name=bar]:checked" ).val();
 
// Get the value from a set of radio buttons
$( "input[type=radio][name=baz]:checked" ).val();

注意：在当前，使用<textarea>元素上的.val()将剥除回车，返回浏览器报告值的字符。铸成，如果此值通过XHR发送到服务器，返回的回车符会被保留（或者由浏览器添加，它在原始值中不包含它们）。对于这个问题的变通方法，可以通过使用valHook来实现，如下所示：

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

示例：

从单选下拉选框中取得单一的值，从多选下拉选框中选择值的数组，并显示它们的值。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>val demo</title>
  <style>
  p {
    color: red;
    margin: 4px;
  }
  b {
    color: blue;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.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() || [];
  // When using jQuery 3:
  // var multipleValues = $( "#multiple" ).val();
  $( "p" ).html( "<b>Single:</b> " + singleValues +
    " <b>Multiple:</b> " + multipleValues.join( ", " ) );
}
 
$( "select" ).change( displayVals );
displayVals();
</script>
 
</body>
</html>

演示：

找到输入框的值。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>val demo</title>
  <style>
  p {
    color: blue;
    margin: 8px;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.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 )返回类型：jQuery

描述：设置每个匹配的元素的值。

  • 增补版本：1.0.val( value )

    • value
      类型：String or Number or Array
      A string of text, a number, or an array of strings corresponding to the value of each matched element to set as selected/checked.

  • 增补版本：1.4.val( function )

    • function
      类型：Function( Integer index, String value ) => String
      A function returning the value to set. this is the current element. Receives the index position of the element in the set and the old value as arguments.

This method is typically used to set the values of form fields.

val() allows you to pass an array of element values. This is useful when working on a jQuery object containing elements like <input type="checkbox">, <input type="radio">, and <option>s inside of a <select>. In this case, the inputs and the options having a value that matches one of the elements of the array will be checked or selected while those having a value that doesn't match one of the elements of the array will be unchecked or unselected, depending on the type. In the case of <input type="radio">s that are part of a radio group and <select>s, any previously selected element will be deselected.

Setting values using this method (or using the native value property) does not cause the dispatch of the change event. For this reason, the relevant event handlers will not be executed. If you want to execute them, you should call .trigger( "change" ) after setting the value.

The .val() method allows setting the value by passing in a function. As of jQuery 1.4, the function is passed two arguments, the current element's index and its current value:

1
2
3
 
$( "input[type=text].tags" ).val(function( index, value ) {
  return value.trim();
});

This example removes leading and trailing whitespace from the values of text inputs with a "tags" class.

示例：

设置一个输入框的值。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>val demo</title>
  <style>
  button {
    margin: 4px;
    cursor: pointer;
  }
  input {
    margin: 4px;
    color: blue;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.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>

演示：

使用函数参数来修改一个输入框的值。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>val demo</title>
  <script src="https://code.jquery.com/jquery-1.10.2.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" ).on( "blur", function() {
  $( this ).val(function( i, val ) {
    return val.toUpperCase();
  });
});
</script>
 
</body>
</html>

演示：

设置一个单选下拉选框、多选下拉选框架、勾选框和单选钮的值。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>val demo</title>
  <style>
  body {
    color: blue;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.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>

演示：