当前位置: 首页 > 中文手册 > jQuery.val() 函数详解

jQuery.val() 函数详解

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

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

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

语法

jQueryObject.val( [ values ] )

参数

参数描述
values可选/String/Array/Function类型用于设置的value值。

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

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

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

如果参数valuesnullundefined,则将其视作空字符串("")。如果参数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"] );

运行代码

85 13
我们认为: 用户的主要目的,是为了获取有用的信息,而不是来点击广告的。因此本站将竭力做好内容,并将广告和内容进行分离,确保所有广告不会影响到用户的正常阅读体验。用户仅凭个人意愿和兴趣爱好点击广告。
我们坚信:只有给用户带来价值,用户才会给我们以回报。
CodePlayer技术交流群1CodePlayer技术交流群1

帮朋友打一个硬广告:

P2P网贷系统(Java版本) 新年低价大促销,多年P2P技术积累,系统功能完善(可按需定制,可支持第三方存管、银行存管),架构稳定灵活、性能优异、二次开发快速简单。 另可提供二次开发、安装部署、售后维护、安全培训等一条龙服务。

外行看热闹,内行看门道。可以自信地认为,在系统设计上,比市面上的晓风、迪蒙、方维、绿麻雀、国融信、金和盛等P2P系统要好。
深圳地区支持自带技术人员现场考察源代码、了解主要技术架构,货比三家,再决定是否购买。

也可推荐他人购买,一旦完全成交,推荐人可获得实际售价 10% 的返现。
有意向者,详情请 点击这里 联系,工作时间立即回复。