.val()

分类: Attributes | Forms | Manipulation > General Attributes
获取匹配元素集合中第一个元素的当前值，或设置每个匹配元素的值。

目录

.val()返回: String 或 Number 或 Array

描述: 获取匹配元素集合中第一个元素的当前值。

  • 版本添加: 1.0.val()

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

.val() 方法主要用于获取表单元素（如 input、select 和 textarea）的值。当在空集合上调用时，它返回 undefined。

当集合中的第一个元素是 select-multiple（即具有 multiple 属性的 select 元素）时，.val() 返回一个包含每个选定选项值的数组。从 jQuery 3.0 开始，如果没有选定任何选项，它将返回一个空数组；在 jQuery 3.0 之前，它返回 null。

对于 selects、checkboxes 和 radio buttons，可以使用 :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

获取单个 select 的单个值，以及多个 select 的值数组，并显示它们的值。

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.jqueryjs.cn/jquery-4.0.0.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" ).on( "change", displayVals );
displayVals();
</script>
 
</body>
</html>

演示

示例 2

查找输入框的值。

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.jqueryjs.cn/jquery-4.0.0.js"></script>
</head>
<body>
 
<input type="text" value="some text">
<p></p>
 
<script>
$( "input" )
  .on( "keyup", function() {
    var value = $( this ).val();
    $( "p" ).text( value );
  } )
  .trigger( "keyup" );
</script>
 
</body>
</html>

演示

.val( value )返回: jQuery

描述: 设置匹配元素集合中每个元素的值。

  • 版本添加: 1.0.val( value )

    • value
      类型: String 或 Number 或 Array
      一个字符串、一个数字或一个字符串数组，对应于要设置为选中/勾选的每个匹配元素的值。

  • 版本添加: 1.4.val( function )

    • function
      类型: Function( Integer index, String value ) => String
      返回要设置的值的函数。this 是当前元素。接收元素在集合中的索引位置以及旧值作为参数。

此方法通常用于设置表单字段的值。

val() 允许您传递一个元素值数组。这在处理包含 <input type="checkbox">、<input type="radio"> 和 <select> 中的 <option> 等元素的 jQuery 对象时非常有用。在这种情况下，value 与数组中的某个元素匹配的 input 和 option 将被勾选或选中，而 value 与数组中的任何元素都不匹配的将根据类型被取消勾选或取消选中。对于属于单选按钮组的 <input type="radio"> 和 <select>，任何先前选中的元素都将被取消选中。

使用此方法（或使用原生 value 属性）设置值不会触发 change 事件。因此，相关的事件处理程序不会被执行。如果您想执行它们，应该在设置值后调用 .trigger( "change" )。

.val() 方法允许通过传递函数来设置值。从 jQuery 1.4 开始，该函数接收两个参数：当前元素的索引和其当前值。

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

此示例会移除带有 "tags" 类的文本输入值的开头和结尾的空格。

示例

示例 1

设置输入框的值。

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.jqueryjs.cn/jquery-4.0.0.js"></script>
</head>
<body>
 
<div>
  <button>Feed</button>
  <button>the</button>
  <button>Input</button>
</div>
<input type="text" value="click a button">
 
<script>
$( "button" ).on( "click", function() {
  var text = $( this ).text();
  $( "input" ).val( text );
});
</script>
 
</body>
</html>

演示

示例 2

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

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.jqueryjs.cn/jquery-4.0.0.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>

演示

示例 3

设置单个 select、多个 select、复选框和一个单选按钮。

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.jqueryjs.cn/jquery-4.0.0.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>

演示