.val()

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

Contents:

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

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

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

    • 这个方法不接受任何参数。

.val()方法主要用于获取表单元素的值，比如 input, select 和 textarea。 如果是select元素， 当没有选择项被选中，它返回null;如果select元素有multiple（多选）属性，并且至少一个选择项被选中， .val()方法返回一个数组，这个数组包含每个选中选择项的值。

对于选择框和复选框，您也可以使用:selected 和 :checked选择器来获取值，例如：

1
2
3
4
 
$('select.foo option:selected').val();    // get the value from a dropdown select
$('select.foo').val();                    // get the value from a dropdown select even easier
$('input:checkbox:checked').val();        // get the value from a checked checkbox
$('input:radio[name=bar]:checked').val(); // get the value from a set of radio buttons

注意: 通过 .val() 方法从 textarea 元素中取得的值是不含有回车（\r）字符的。但是如果该值是通过 XHR 传递给服务器的，回车（\r）字符会被保留（或者是被浏览器添加的，但是在原始数据中并不包含回车（\r））。可以使用下面的 valHook 方法解决这个问题：

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

例子:

Example: 从单一列表框和复选列表中取值，并显示选中的值。

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
 
<!DOCTYPE html>
<html>
<head>
  <style>
  p { color:red; margin:4px; }
  b { color:blue; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.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() || [];
      $("p").html("<b>Single:</b> " +
                  singleValues +
                  " <b>Multiple:</b> " +
                  multipleValues.join(", "));
    }
 
    $("select").change(displayVals);
    displayVals();
 
</script>
 
</body>
</html>

Demo:

Example: 取得文本框的值。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
<!DOCTYPE html>
<html>
<head>
  <style>
 
  p { color:blue; margin:8px; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.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>

Demo:

.val( value )返回: jQuery

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

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

    • value
      类型: String, Array
      一个文本字符串或一个以字符串形式的数组来设定每个匹配元素的值。

  • 添加的版本: 1.4.val( function(index, value) )

    • function(index, value)
      类型: Function()
      一个用来返回设置值的函数。this 指向当前元素。接收的集合中的元素，旧的值作为参数的索引位置。

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

传递一个元素的数组，允许匹配<input type="checkbox">, <input type="radio"> 和 <select multiple="multiple">中的<option>被选中。对于 <input type="radio"> 属于一个单选按钮组 ，还有<select multiple="multiple">的其他元素都将被取消选中。

.val() 方法允许我们通过一个函数来设置这个值。 从 jQuery 1.4 开始， 这个函数通过两个参数，当前元素的所引值和它当前的值：

1
2
3
 
$('input:text.items').val(function( index, value ) {
  return value + ' ' + this.className;
});

这个例子将字符串" items" 附给文本框。

例子:

Example: 点击按钮时，在文本框中显示按钮的值。

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
 
<!DOCTYPE html>
<html>
<head>
  <style>
  button { margin:4px; cursor:pointer; }
  input { margin:4px; color:blue; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.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>

Demo:

Example: 将函数作为参数设置文本框的值。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
<!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.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').bind('blur', function() {
    $(this).val(function( i, val ) {
      return val.toUpperCase();
    });
  });
  </script>
 
</body>
</html>

Demo:

Example: 设置单一列表框，复选列表，复选框和单选按钮的值。

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
 
<!DOCTYPE html>
<html>
<head>
  <style>
  body { color:blue; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.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>

Demo: