先来看一个val方法的简单用法,用val()获取值
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>HelloWorld</title>
<!-- 引入jQuery库 -->
<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
</head>
<body>
<input id="user_name" />
<script>
$("#user_name").val("Tom");//设定input文本框的值,val()函数也可以获取值。
</script>
</body>
</html>
运行后结果如下:
表单对象属性过滤选择器如下:
val方法选中单选
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>HelloWorld</title>
<!-- 引入jQuery库 -->
<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
</head>
<body>
<input type="radio" name="sex" value="0"/>男
<input type="radio" name="sex" value="1"/>女
<script>
$("[name='sex']").val(["1"]); //可以选中val为1的。
</script>
</body>
</html>
执行结果如下:
value值为1的被选中。
对于单选来说:每次只可以选中一个,如下代码执行结果不变,仍为只选中女。
val方法选中复选
如下代码
选中value值为1的选项
对于多选还可以指定选中多个选项,如下代码
执行后如下:
val方法选中下拉列表
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>HelloWorld</title>
<!-- 引入jQuery库 -->
<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
</head>
<body>
<select>
<option value="0">语文</option>
<option value="1">数学</option>
</select>
<script>
$("select").val(["1"]); //默认选中数学
</script>
</body>
</html>
运行结果如下:
下拉列表也只能选中一个。