所有清除表單數據的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中文網其他相關文章！