CodePlayer

val()函数用于设置或返回当前jQuery对象所匹配的DOM元素的value值。

该函数常用于设置或获取表单元素的value属性值。例如：<input>、<textarea>、<select>、<option>、<button>等。

该函数属于jQuery对象(实例)。

语法

jQueryObject.val( [ values ] )

参数

如果没有指定values参数，则表示获取第一个匹配元素的value值；如果指定了value参数，则表示设置所有匹配元素的value值。

jQuery 1.4 新增支持：参数values可以为函数。val()将根据匹配的所有元素遍历执行该函数，函数中的this将指向对应的DOM元素。

val()还会为函数传入两个参数：第一个参数就是该元素在匹配元素中的索引，第二个参数就是该元素当前的value属性值。函数的返回值就是需要为该元素设置的value值。

如果参数values为null或undefined，则将其视作空字符串("")。如果参数values不是字符串或函数类型，并且当前元素不是多选的选择框(多选选择框会特殊处理数组类型)，则其他类型的值均会被转换为字符串( toString() )。

返回值

val()函数的返回值是String/Array/jQuery类型，返回值的实际类型取决于val()函数所执行的操作。

如果val()函数执行的是设置操作，将返回当前jQuery对象本身。如果执行的是获取操作，将返回第一个匹配元素的value属性值，该值一般为字符串类型；如果该元素是多选的<select>元素，则返回包含所有选中值的数组。

示例&说明

以下面这段HTML代码为例：

<form id="n1" name="myForm" method="post">
	<input id="n2" class="normal" name="username" type="text" ><br>
	<input id="n3" class="normal" name="password" type="password" value="123456" ><br>
	<input id="n4" class="normal" name="user_id" type="hidden" value="1" ><br>
	
	<input id="n5" name="uid" type="checkbox" value="12" >12
	<input id="n6" name="uid" type="checkbox" checked="checked" value="13" >13
	<input id="n7" name="uid" type="checkbox" checked="checked" value="14" >14<br>
	
	<input id="n8" name="gender" type="radio" checked="checked" value="men" >男
	<input id="n9" name="gender" type="radio" value="women" >女<br>
	
	<textarea id="n10" name="content" rows="3" cols="80">此处是内容</textarea><br>
	
	<select id="n11" name="answer">
		<option value="A">选项A</option>
		<option value="B" selected="selected">选项B</option>
		<option value="C">选项C</option>
		<option value="D">选项D</option>
	</select><br>
	
	<select id="n12" name="multiAnswer" multiple="multiple">
		<option value="A">A</option>
		<option value="B">B</option>
		<option value="C" selected="selected">C</option>
		<option value="D" selected="selected">D</option>
	</select><br>
</form>

我们编写如下jQuery代码：

var $n2 = $("#n2");
document.writeln( $n2.val() ); // (空字符串)
// 设置n2的value为"CodePlayer"
$n2.val("CodePlayer");

var $n3 = $("#n3");
document.writeln( $n3.val() ); // 123456
// 设置n3的value为""
$n3.val("");

 // 将含有类名normal的所有input元素的value设为"123"
$("input.normal").val( "123" );
document.writeln( $n2.val() ); // 123
document.writeln( $n3.val() ); // 123
document.writeln( $("#n4").val() ); // 123

var $checkedUid = $("[name=uid]:checked");
// 虽然匹配的元素有n6、n7两个，但只会获取第一个匹配元素的值
document.writeln( $checkedUid.val() ); // 13

var $checkedGender = $("[name=gender]:checked");
document.writeln( $checkedGender.val() ); // men

// 如果单选按钮的value为"men"和"women"，将其改为"男"和"女"
$(":radio").val( function(index, currentValue){
	// 函数内的this指向当前迭代的DOM元素
	if( currentValue == "men"){
		return "男";
	}else if( currentValue == "women"){
		return "女";
	}else { // 其他值不变
		return currentValue;
	}
});

var $n9 = $("#n10");
document.writeln( $n9.val() ); // 此处是内容
$n9.val("新的内容");

var $n10 = $("#n11");
document.writeln( $n10.val() ); // B
// 将单选的选择框的选中项改为value为C的option
$n10.val("C");

var $n11 = $("#n12");
document.writeln( $n11.val() ); // C,D
// 将多选的选择框的选中项改为value分别为A、B、C的3个option
$n11.val( ["A", "B", "C"] );

运行代码