jQuery val()

admin發表於2017-02-16
jQuery

此方法獲取匹配的元素集合中第一個元素的value屬性值，或設定匹配的元素集合中每個元素的value屬性值。

語法結構一:

[JavaScript] 純文字檢視 複製程式碼
.val()

獲取匹配的元素集合中第一個元素的value屬性值；當在一個空集合上呼叫，它返回undefined。

當該集合中第一個元素是一個select-multiple（即，select元素設定了multiple屬性），val()返回一個包含每個選擇項值的陣列。在jQuery3.0中， 如果沒有選項被選中，返回一個空陣列；在jQuery3.0之前的版本中， 返回null。

jQuery1.0版本新增。

語法結構二:

[JavaScript] 純文字檢視 複製程式碼
.val(value)

引數解析:

value:一個文字字串,一個數字，或一個以字串形式的陣列來設定每個匹配元素的值。

jQuery1.0版本新增。

語法結構三:

[JavaScript] 純文字檢視 複製程式碼
.val(function(index,oldvalue))

引數解析:

function:返回要設定的值的函式。index：可選，當前元素在匹配元素集合中的索引（從0開始），oldValue：可選，當前元素原來的value屬性值。函式中的this指向當前元素。

jQuery1.4版本新增。

關於要設定的value值格式說明:

此說明對語法格式二和語法格式三都有效。

val()允許傳遞一個元素值的陣列。當在類似<input type="checkbox">, <input type="radio">, 和<select>中的 <option>元素上非常有用。在這種情況下，input和option的value與陣列元素相匹配的情況下將被選中（checked）或選定（selected），而那些與陣列元素值不匹配的value是未選中或未選定，這取決於元素型別。

使用這個方法（或使用原生的value屬性（property））設定值，不會觸發change事件。

程式碼例項:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function () {
  $("#bt").click(function () {
    alert($("input:text").val());
  })
})
</script>
</head>
<body>
<div>
  <ul>
    <li>姓名:<input type="text" name="username" value="螞蟻部落"></li>
    <li>暱稱:<input type="text" name="nick" value="螞蟻"></li>
    <li>密碼:<input type="password" name="pw"></li>
  </ul>
</div>
<input type="button" id="bt" value="檢視演示" />
</body>
</html>

獲取匹配元素集合中第一個元素的value屬性值。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function () {
  $("#bt").click(function () {
    $("input:text").val("螞蟻部落");
  })
})
</script>
</head>
<body>
<div>
  <ul>
    <li>姓名:<input type="text" name="username"></li>
    <li>暱稱:<input type="text" name="nick"></li>
    <li>密碼:<input type="password" name="pw"></li>
  </ul>
</div>
<input type="button" id="bt" value="檢視演示" />
</body>
</html>

設定所有匹配元素的value屬性值。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function () {
  $("#bt").click(function () {
    $("input:text").val(function () {
      return "螞蟻部落";
    });
  })
})
</script>
</head>
<body>
<div>
  <ul>
    <li>姓名:<input type="text" name="username"></li>
    <li>暱稱:<input type="text" name="nick"></li>
    <li>密碼:<input type="password" name="pw"></li>
  </ul>
</div>
<input type="button" id="bt" value="檢視演示" />
</body>
</html>

功能與前面的程式碼相同，只不過value值是通過一個回撥函式返回的。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
body { color:blue; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function () {
  $("#multiple").val(["螞蟻部落二", "螞蟻部落三"]);
  $("input").val(["check1","check2", "radio1" ]);
}) 
</script>
</head>
<body>
  <select id="multiple" multiple="multiple">
    <option selected="selected">螞蟻部落一</option>
    <option>螞蟻部落二</option>
    <option selected="selected">螞蟻部落三</option>
  </select><br/>
  <input type="checkbox" name="checkboxname" value="check1"/> 核取方塊一
  <input type="checkbox" name="checkboxname" value="check2"/> 核取方塊二
  <input type="radio"  name="r" value="radio1"/> 單選按鈕一
  <input type="radio"  name="r" value="radio2"/> 單選按鈕二
</body>
</html>

傳遞陣列設定匹配元素的value屬性值，如果表單元素的值與陣列元素某個值相同，那麼就會被選中或者選定。

相關文章