获取选项值 jQuery - JavaScript

在使用 jQuery 和 JavaScript 的过程中，我们经常需要获取 HTML 元素的选项值，例如下拉菜单 <select>、单选框 <input type="radio">、复选框 <input type="checkbox">等等。本文将介绍如何通过 jQuery 和 JavaScript 获取这些元素的选项值。

获取单个元素的选项值

对于单个元素，我们可以使用 val() 方法来获取其选项值。例如，获取下拉菜单的选项值：

var selectedValue = $('select').val();

这将获取选中项的值，并存储在 selectedValue 变量中。

对于单选框和复选框，我们可以使用 :checked 选择器来获取其选中状态。例如，获取单选框的选中值：

var selectedValue = $('input[type="radio"]:checked').val();

这将获取选中项的值，并存储在 selectedValue 变量中。对于复选框，我们可以获取选中的所有值：

var selectedValues = [];
$('input[type="checkbox"]:checked').each(function() {
  selectedValues.push($(this).val());
});

以上代码将选中的复选框的值存储在 selectedValues 数组中。

获取多个元素的选项值

对于多个元素，我们可以使用选择器和 map() 方法来获取它们的选项值。例如，获取多个下拉菜单的选项值：

var selectedValues = $('select').map(function() {
  return $(this).val();
}).get();

以上代码将所有下拉菜单的选中值存储在 selectedValues 数组中。

对于多个单选框和复选框，我们可以使用选择器和 filter() 方法来获取它们的选中状态。例如，获取多个单选框的选中值：

var selectedValues = $('input[type="radio"]').filter(':checked').map(function() {
  return $(this).val();
}).get();

以上代码将所有单选框的选中值存储在 selectedValues 数组中。对于复选框，我们可以获取选中的所有值：

var selectedValues = $('input[type="checkbox"]').filter(':checked').map(function() {
  return $(this).val();
}).get();

以上代码将所有选中的复选框的值存储在 selectedValues 数组中。

总结

通过以上介绍，我们了解了如何通过 jQuery 和 JavaScript 获取 HTML 元素的选项值。对于单个元素，我们可以使用 val() 方法来获取其选项值；对于单选框和复选框，我们可以使用 :checked 选择器来获取其选中状态。对于多个元素，我们可以使用 map() 方法来获取它们的选项值；对于多个单选框和复选框，我们可以使用 filter() 方法来获取它们的选中状态。