.val()

類別： 屬性 | 表單 | 操作 > 一般屬性
取得已配對元素集合中第一個元素的目前值，或設定每個已配對元素的值。

內容

.val()傳回： 字串 或 數字 或 陣列

說明： 取得已配對元素集合中第一個元素的目前值。

  • 新增版本： 1.0.val()

    • 此方法不接受任何參數。

.val() 方法主要用於取得表單元素的值，例如 input、select 和 textarea。當在空集合中呼叫時，它會傳回 undefined。

當集合中的第一個元素為 select-multiple（即具有 multiple 屬性的 select 元素）時，.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-3.7.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>

示範

找出輸入方塊的值。

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-3.7.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
      類型：字串 或 數字 或 陣列
      文字字串、數字或字串陣列，對應於要設定為選取/核取的每個匹配元素的值。

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

    • function
      類型：函式( 整數 index, 字串 value ) => 字串
      傳回要設定值的函式。this 是目前的元素。接收集合中元素的索引位置和舊值作為引數。

此方法通常用於設定表單欄位的數值。

val() 允許您傳遞元素值陣列。這在處理包含像 <input type="checkbox">、<input type="radio"> 和 <select> 內的 <option>s 等元素的 jQuery 物件時很有用。在這種情況下，具有與陣列元素之一相符的 value 的 input 和 option 將會被選取或選中，而具有與陣列元素之一不相符的 value 的 input 和 option 將會取消選取或取消選中，具體取決於類型。對於作為無線電組和 <select> 的一部分的 <input type="radio">s，任何先前選取的元素都將取消選取。

使用此方法（或使用本機 value 屬性）設定值不會導致傳送 change 事件。因此，相關事件處理常式不會執行。如果您想執行它們，您應該在設定值後呼叫 .trigger( "change" )。

.val() 方法允許透過傳入函式來設定值。從 jQuery 1.4 開始，此函式會傳入兩個引數，即目前元素的索引及其目前值

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

此範例會移除具有「標籤」類別的文字輸入值的開頭和結尾空白。

範例

設定輸入方塊的值。

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

示範

使用函式引數來修改輸入方塊的值。

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

示範

設定單一選取、多重選取、核取方塊和無線電按鈕。

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

示範