jQuery按名称获取多个输入值

当我们需要获取多个表单元素的值时，我们可以通过jQuery按名称获取它们的值，并在需要时对它们进行处理。以下是如何使用jQuery按名称获取多个输入值的简单指南。

1. HTML准备工作

首先，我们需要在HTML中为我们的表单元素设置名称属性。例如，我们有三个输入框：姓名、电子邮件和联系电话。我们可以这样设置它们的名称属性：

<form>
  <label for="name">姓名：</label>
  <input type="text" id="name" name="name">

  <label for="email">电子邮件：</label>
  <input type="email" id="email" name="email">

  <label for="phone">联系电话：</label>
  <input type="tel" id="phone" name="phone">

  <br><br>

  <button type="button" id="submit">提交</button>
</form>

2. jQuery代码

接下来，我们需要编写jQuery代码来获取这些表单元素的值。我们可以使用jQuery的serializeArray()方法将表单元素的名称和值转换为一个对象数组。

$(document).ready(function() {
  $('#submit').click(function() {
    var formData = $('form').serializeArray();

    console.log(formData);

    return false;
  });
});

在上面的代码中，我们在表单的提交按钮上绑定了一个点击事件，并通过serializeArray()方法获取了表单元素的值。我们将这个值存储在formData变量中，并使用console.log()方法将它打印到浏览器的控制台中。

3. 处理返回的数据

现在，我们已经成功地获取了表单元素的值。接下来，我们可以按名称获取它们并将它们用于我们需要的目的。为了按名称获取表单元素的值，我们可以遍历formData数组，并查找与我们需要的表单元素名称匹配的对象。

$(document).ready(function() {
  $('#submit').click(function() {
    var formData = $('form').serializeArray();
    
    var name = '',
        email = '',
        phone = '';

    $.each(formData, function(index, element) {
      if (element.name === 'name') {
        name = element.value;
      }

      if (element.name === 'email') {
        email = element.value;
      }

      if (element.name === 'phone') {
        phone = element.value;
      }
    });

    console.log('姓名：' + name);
    console.log('电子邮件：' + email);
    console.log('联系电话：' + phone);

    return false;
  });
});

在上面的代码中，我们创建了三个变量：name、email和phone。我们使用$.each()方法迭代formData数组中的每个对象，并使用if语句检查每个对象的名称是否与我们需要的表单元素名称匹配。如果找到匹配的表单元素名称，我们将其值存储在相应的变量中，并将其打印到控制台中。

结论

现在，我们已经成功地使用jQuery按名称获取了多个表单元素的值。我们可以使用这些值来进行其他操作，如验证表单、向服务器发送表单数据等。我们可以扩展以上代码，以根据需要获取更多的表单元素值。