📅 最后修改于: 2023-12-03 15:08:22.463000 🧑 作者: Mango
在网页开发中，经常需要获取文本框中的值。使用 jQuery 可以方便地获取文本框中的值。
可以通过 .val() 方法获取一个或多个文本框的值。该方法可以用于 <input>、<textarea>、<select> 元素。
// 获取 id 为 txtName 的文本框的值
var name = $('#txtName').val();
// 获取所有名称为 hobby 的复选框的值
var hobby = $('input[name="hobby"]:checked').val();
// 获取 id 为 selProvince 的下拉列表选中项的值
var province = $('#selProvince').val();
同样可以使用 .val() 方法设置文本框的值。
// 设置 id 为 txtName 的文本框的值为 "Tom"
$('#txtName').val('Tom');
下面是一个简单的演示，展示如何使用 jQuery 获取和设置文本框的值。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery 获取文本框的值</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<label>姓名：</label>
<input type="text" id="txtName">
<br>
<label>爱好：</label>
<input type="checkbox" name="hobby" value="看书">看书
<input type="checkbox" name="hobby" value="游泳">游泳
<input type="checkbox" name="hobby" value="跑步">跑步
<br>
<label>省份：</label>
<select id="selProvince">
<option value="广东">广东</option>
<option value="江苏">江苏</option>
<option value="浙江">浙江</option>
</select>
<br>
<button id="btnGetValues">获取值</button>
<button id="btnSetValues">设置值</button>
<script>
// 获取值
$('#btnGetValues').click(function() {
var name = $('#txtName').val();
var hobby = $('input[name="hobby"]:checked').val();
var province = $('#selProvince').val();
alert('姓名：' + name + '\n爱好：' + hobby + '\n省份：' + province);
});
// 设置值
$('#btnSetValues').click(function() {
$('#txtName').val('Tom');
$('input[name="hobby"]').eq(1).prop('checked', true);
$('#selProvince').val('江苏');
});
</script>
</body>
</html>
本文介绍了如何使用 jQuery 获取和设置文本框的值。.val() 方法是 jQuery 中常用的方法之一，掌握好它可以使开发更加便利。