當前位置: 首頁>>代碼示例 >>用法及示例精選 >>正文

JQuery .val()用法及代碼示例


獲取匹配元素集中第一個元素的當前值或設置每個匹配元素的值。

用法一

.val() => String or Number or Array

說明：獲取匹配元素集中第一個元素的當前值。

  • 添加的版本：1.0.val()

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

.val() 方法主要用於獲取表單元素的值，例如 input 、 select 和 textarea 。在空集合上調用時，它返回 undefined 。

當集合中的第一個元素是select-multiple(即，一個select元素與multiple屬性集)，.val()返回一個數組，其中包含每個選定選項的值。從 jQuery 3.0 開始，如果沒有選擇任何選項，則返回一個空數組；在 jQuery 3.0 之前, 它返回null.

對於選擇、複選框和單選按鈕，您可以使用:checked 來選擇正確的元素。例如：

// 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();

注意：目前，使用.val()在<textarea>元素從browser-reported 值中去除回車符。但是，當這個值通過 XHR 發送到服務器時，會保留回車(或由不包含在原始值中的瀏覽器添加)。可以使用 valHook 來解決此問題，如下所示：

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

例子：

從單選中獲取單個值，從多選中獲取值數組並顯示它們的值。

<!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.5.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" ).change( displayVals );
displayVals();
</script>
 
</body>
</html>

演示：

查找輸入框的值。

<!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.5.0.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 或 Number 或 Array
      與每個匹配元素的值對應的文本字符串、數字或字符串數組，以設置為選中/選中。

  • 添加的版本：1.4.val( function )

    • function
      類型：Function(Integer 索引，String 值)=> String
      返回要設置的值的函數。 this 是當前元素。接收集合中元素的索引位置和舊值作為參數。

此方法通常用於設置表單字段的值。

val() 允許您傳遞元素值數組。這在處理包含 <input type="checkbox"> 、 <input type="radio"> 和 <option> 等元素的 jQuery 對象時非常有用，這些元素包含在 <select> 中。在這種情況下，將檢查或選擇具有與數組元素之一匹配的 value 的 input 和 option，而具有與其中一個元素不匹配的 value 的 value根據類型，數組將被取消選中或取消選中。對於屬於無線電組的 <input type="radio"> 和 <select> 的情況，將取消選擇任何先前選擇的元素。

使用此方法(或使用本機 value 屬性)設置值不會導致 change 事件的調度。因此，不會執行相關的事件處理程序。如果要執行它們，則應在設置值後調用.trigger( "change" )。

.val() 方法允許通過傳入函數來設置值。從 jQuery 1.4 開始，該函數被傳遞兩個參數，當前元素的索引和它的當前值：

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

此示例使用 "tags" 類從文本輸入的值中刪除前導和尾隨空格。

例子：

設置輸入框的值。

<!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.5.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" ).click(function() {
  var text = $( this ).text();
  $( "input" ).val( text );
});
</script>
 
</body>
</html>

演示：

使用函數參數來修改輸入框的值。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>val demo</title>
  <script src="https://code.jquery.com/jquery-3.5.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>

演示：

設置單選、多選、複選框和單選按鈕。

<!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.5.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>

演示：

相關用法


注：本文由純淨天空篩選整理自jquery.com大神的英文原創作品 .val()。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。