正文

学会用jQuery轻松获取表单选中项：5分钟掌握获取复选框、单选按钮和下拉菜单值的方法

/0 浏览量
0513

在网页开发中，处理表单数据是常见的需求。jQuery 作为一款强大的 JavaScript 库，可以帮助我们轻松地获取表单中的选中项。无论是复选框、单选按钮还是下拉菜单，jQuery 都能提供简单易用的方法来获取它们的值。下面，我们就来一步步学习如何在5分钟内掌握这些方法。

获取复选框的选中项

首先，让我们来看看如何获取复选框的选中项。假设我们有一个包含多个复选框的表单，如下所示：

<form>
  <input type="checkbox" name="color" value="red"> 红色
  <input type="checkbox" name="color" value="green"> 绿色
  <input type="checkbox" name="color" value="blue"> 蓝色
</form>

要获取所有选中的复选框的值，可以使用以下 jQuery 代码：

$(document).ready(function() {
  $('#submit').click(function() {
    var selectedColors = [];
    $('input[type="checkbox"][name="color"]:checked').each(function() {
      selectedColors.push($(this).val());
    });
    alert(selectedColors.join(', '));
  });
});

在这段代码中，我们首先监听表单提交事件。当用户点击提交按钮时，我们遍历所有选中的复选框，并将它们的值添加到 selectedColors 数组中。最后，我们使用 alert 函数显示所有选中的颜色。

获取单选按钮的选中项

获取单选按钮的选中项与获取复选框类似。以下是一个包含两个单选按钮的表单示例：

<form>
  <input type="radio" name="gender" value="male"> 男性
  <input type="radio" name="gender" value="female"> 女性
</form>

要获取选中的单选按钮的值，可以使用以下 jQuery 代码：

$(document).ready(function() {
  $('#submit').click(function() {
    var selectedGender = $('input[type="radio"][name="gender"]:checked').val();
    alert(selectedGender);
  });
});

在这段代码中，我们直接使用 .val() 方法获取选中的单选按钮的值。

获取下拉菜单的选中项

获取下拉菜单的选中项同样简单。以下是一个包含一个下拉菜单的表单示例：

<form>
  <select name="country">
    <option value="usa">美国</option>
    <option value="china">中国</option>
    <option value="japan">日本</option>
  </select>
</form>

要获取选中的下拉菜单的值，可以使用以下 jQuery 代码：

$(document).ready(function() {
  $('#submit').click(function() {
    var selectedCountry = $('select[name="country"]').val();
    alert(selectedCountry);
  });
});

在这段代码中，我们使用 .val() 方法获取选中的下拉菜单的值。

总结

通过以上示例，我们可以看到，使用 jQuery 获取表单选中项非常简单。只需掌握一些基本的 jQuery 选择器和方法，我们就可以轻松地获取复选框、单选按钮和下拉菜单的值。希望这篇文章能帮助你快速掌握这些方法，让你在网页开发中更加得心应手。

-- 展开阅读全文 --