如何使用 jQuery 获取输入文本框中的值？

jQuery 是一个广泛应用于 web 开发的 JavaScript 库，它使得 JavaScript 代码更容易编写并且更加简洁高效。在 web 开发中，我们经常需要获取表单控件的值，例如输入框、下拉框、单选框或复选框的值。本文将介绍如何使用 jQuery 获取输入文本框中的值。

获取单个文本框的值

要获取单个文本框的值，我们需要使用 jQuery 的 .val() 方法。该方法返回所选元素的值。例如，我们有一个 id 为 username 的输入框，我们可以使用以下代码来获取它的值：

// 获取输入框的值
var username = $('#username').val();

// 在控制台输出输入框的值
console.log(username);

获取多个文本框的值

如果我们需要获取多个文本框的值，我们可以使用 jQuery 的 .each() 方法。该方法可以遍历一个 jQuery 对象集合中的所有元素并对它们执行一个函数。例如，我们有三个文本框，每个都有一个不同的 id，我们可以使用以下代码来获取它们的值：

// 获取文本框的值
var values = [];
$('input[type="text"]').each(function() {
  var value = $(this).val();
  values.push(value);
});

// 在控制台输出输入框的值
console.log(values);

获取 radio button 的值

如果我们需要获取 radio button 的值，我们需要先找到被选中的 radio button，然后使用 .val() 方法来获取它的值。例如，我们有一个 name 为 gender 的 radio button，我们可以使用以下代码来获取它的值：

// 获取 radio button 的值
var gender = $('input[name="gender"]:checked').val();

// 在控制台输出 radio button 的值
console.log(gender);

获取 checkbox 的值

如果我们需要获取 checkbox 的值，我们需要遍历所有选中的 checkbox 并将它们的值添加到一个数组中。例如，我们有三个 checkbox，每个都有一个不同的 value 值，我们可以使用以下代码来获取它们的值：

// 获取 checkbox 的值
var values = [];
$('input[type="checkbox"]:checked').each(function() {
  var value = $(this).val();
  values.push(value);
});

// 在控制台输出 checkbox 的值
console.log(values);

总结

本文介绍了如何使用 jQuery 获取输入文本框、radio button 和 checkbox 的值。使用 jQuery 可以大大简化表单控件值的获取过程，提高代码的可读性和可维护性。