在jQuery里，和表单打交道时，val() 方法是用得特别频繁的一个工具。它专门用来处理表单元素的值，无论是文本框、下拉列表还是多选复选框，val() 都能统一操持。

这个方法有两种核心用途：获取匹配元素中第一个元素的当前值，以及设置匹配元素中每一个元素的值。

我个人在工作中处理用户注册页、搜索筛选栏时，几乎离不开它。因为不同的表单控件，原生DOM取值方式差异很大，val() 把这些差异封装了起来，一行代码就能搞定。

获取值的语法与行为

$(selector).val()

调用时不传任何参数，直接从匹配的第一个元素身上读取当前值。这里要留意一个容易忽视的细节：它拿的是第一个元素的值，不是你选中的一组的全部值。当你在一个包含多个控件的选择器上调用它，返回的始终是里索引为0的那个元素的值。

对于不同类型的表单元素，val() 的返回值有明确规则：

• 如果是一个单选下拉框 <select> 没有选中任何 <option>，返回 null。

• 如果是多选下拉框 <select multiple>，返回一个数组，包含所有被选中选项的值。如果什么都没选，同样是 null，但可以通过 || [] 这类写法兜个底。

• 对于文本框、文本域，返回输入的字符串。

我早期踩过一个坑：在多选列表上直接拼接返回结果，报了错，原因就是没选中时返回的是 null，没法调用数组的 join 方法。后来我习惯拿到的值后面跟 || [] 做个保护，代码如下：

var multiVals = $("#colors").val() || [];

设置值的语法

直接赋值写法：

$(selector).val(value)

value 参数是你想设进去的内容，可以是字符串、数字或者字符串数组。如果是数组，它专门用来匹配复选框组或 <select multiple> 里那些应该被选中的项。

函数赋值写法：

$(selector).val(function(index, currentValue) {
    return 新的值;
})

这个形式在需要动态计算值的场景下很有用。回调函数拿到两个参数：index 是元素在中的位置，currentValue 是元素的当前值。你在函数末尾 return 出去的，就是最终要赋的值。

实战示例

示例一：读取单选下拉框的值

我们先看一个基础的下拉框选择交互。页面上有一个课程选择列表，当用户切换选项时，我们用 val() 拿到选中的值并展示出来。

<select id="courseSelect">
  <option value="html">HTML 基础</option>
  <option value="css">CSS 布局</option>
  <option value="js">JavaScript 编程</option>
</select>
<p id="result"></p>

<script>
function showCourse() {
  var selected = $("#courseSelect").val();
  $("#result").text("你选择的课程代码是：" + selected);
}
$("#courseSelect").on("change", showCourse);
showCourse();
</script>

运行后，下拉框默认选中第一项，页面上立即显示“你选择的课程代码是：html”。切换选项时，p 标签里的内容会跟着变。

示例二：单选框与多选框的值处理

这是表单里常遇到的场景。一个单选框供用户选性别，一个多选下拉框选兴趣标签。同时获取两者的值并显示。

<label><input type="radio" name="gender" value="male" checked> 男</label>
<label><input type="radio" name="gender" value="female"> 女</label>

<select id="tags" multiple>
  <option value="frontend" selected>前端开发</option>
  <option value="backend">后端开发</option>
  <option value="data">数据分析</option>
</select>
<p id="info"></p>

<script>
function showInfo() {
  var genderVal = $("input[name='gender']:checked").val();
  var tagVals = $("#tags").val() || [];
  $("#info").text("性别: " + genderVal + " | 标签: " + tagVals.join("、"));
}
$("input[name='gender']").on("change", showInfo);
$("#tags").on("change", showInfo);
showInfo();
</script>

默认情况下，显示“性别: male | 标签: frontend”。#tags 是多选控件，按住 Ctrl 多选后，val() 返回数组，我们用 join("、") 拼成中文顿号分隔的字符串显示出来。

示例三：用函数给一组输入框赋值

假设一个收货地址表单，国家字段默认填“我国”，但对老用户我们想自动补个后缀提示。

<input type="text" class="addr-field" value="">
<input type="text" class="addr-field" value="">
<input type="text" class="addr-field" value="">
<button id="fillBtn">自动填充</button>

<script>
$("#fillBtn").on("click", function() {
  $(".addr-field").val(function(index, oldVal) {
    if (oldVal.trim() === "") {
      return "我国";
    } else {
      return oldVal + "（已确认）";
    }
  });
});
</script>

点击按钮后，空白文本框会被填上“我国”，已有内容的文本框则追加“（已确认）”。这个用法在需要基于元素位置或旧值做条件处理时特别顺手。

本节课程知识要点

• 用 val() 获取值前，先判断返回是否可能是 null，尤其是处理多选控件时，用 || [] 兜底能减少运行时异常。

• 设置文本框值时，如果传入的内容包含 HTML 标签，它们不会被渲染，val() 只处理纯文字。这点和 text() 一致，与 html() 截然不同。

• 对于一组复选框，想全选或反选时，用 val(数组) 批量设置是最直接的。数组里的字符串必须与 <option> 的 value 属性匹配。

• 不要混淆 val() 和 attr("value")。前者获取的是元素的实时属性，反映用户操作后的当前值；后者获取的是HTML标签上写死的初始值。在文本输入框场景下，这个区别很明显。

• 在表单验证流程里，善用回调函数版本的 val(function) 可以在设置值的同时做格式化，比如去除首尾空格、统一大小写，减少一次额外的遍历操作。

掌握了 val()，处理表单数据流就能清爽不少，和 DOM 里原生操作 value 属性比起来，代码的一致性和可读性都会提高。