所有清除表单数据的jQuery函数

本文介绍几种使用 jQuery 清空表单数据的实用方法，这些方法来自 Karl Swedberg 的网站。这些方法可以清除表单中的所有数据，包括文本输入框、下拉列表、单选按钮、复选框等。

方法一：通用函数

以下函数可迭代遍历表单中的所有输入元素，并根据元素类型清除其数据：

function clearForm(form) {
  $(':input', form).each(function() {
    var type = this.type;
    var tag = this.tagName.toLowerCase();
    if (type == 'text' || type == 'password' || tag == 'textarea')
      this.value = "";
    else if (type == 'checkbox' || type == 'radio')
      this.checked = false;
    else if (tag == 'select')
      this.selectedIndex = -1;
  });
};

方法二：重置按钮

您可以添加一个隐藏的重置按钮，然后触发它来清空表单：

$('form > input[type=reset]').trigger('click'); // 假设表单中有一个设置为 display: none; 的重置按钮

方法三：jQuery 元素函数

此方法更便捷，可直接作为 jQuery 函数应用于 DOM 元素：

$.fn.clearForm = function() {
  return this.each(function() {
    var type = this.type, tag = this.tagName.toLowerCase();
    if (tag == 'form')
      return $(':input',this).clearForm();
    if (type == 'text' || type == 'password' || tag == 'textarea')
      this.value = '';
    else if (type == 'checkbox' || type == 'radio')
      this.checked = false;
    else if (tag == 'select')
      this.selectedIndex = -1;
  });
};
// 使用方法
$('#flightsSearchForm').clearForm();

常见问题解答 (FAQ)

• 如何使用 jQuery 的 reset 方法重置表单？

  jQuery 的 reset() 方法是一种简单有效的清除所有表单数据的方法。选择表单并调用 reset() 方法即可。例如：$('form')[0].reset(); 这将重置页面上的第一个表单。

• jQuery 的 empty() 方法有什么作用？

  empty() 方法会移除所选元素的所有子节点和内容。这与 reset() 方法不同，reset() 方法只清除表单字段，而不会移除它们。例如：$('#myForm').empty(); 这将移除表单 myForm 中的所有字段和内容。

• 如何使用 jQuery 清除表单中的所有输入、选择和隐藏字段？

  可以使用 jQuery 的 val() 方法清除表单中的所有输入、选择和隐藏字段。例如：$('form').find('input, select, textarea').val(''); 这将清除表单中所有输入、选择和文本区域的值。

• 如何使用 jQuery 清除表单字段？

  可以使用 val() 方法和选择器精确选择需要清除的字段。例如：$('#myForm').find('input:text, input:password, input:file, select, textarea').val(''); $('#myForm').find('input:radio, input:checkbox').removeAttr('checked').removeAttr('selected'); 这将分别清除文本、密码、文件、选择和文本区域字段，以及取消选中单选按钮和复选框。

• jQuery 的 reset() 方法和 empty() 方法有什么区别？

  reset() 方法会清除所有表单字段的值，将它们恢复到初始状态。而 empty() 方法会移除所选元素的所有子节点和内容，这意味着 empty() 方法会移除表单字段，而不仅仅是清除它们的值。

选择哪种方法取决于您的具体需求和偏好。 方法三提供了一个更简洁的 jQuery 插件式方法，方便复用。 记住根据您的表单 ID 调整选择器。

以上是所有清除表单数据的jQuery函数的详细内容。更多信息请关注PHP中文网其他相关文章！