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

【问题标题】：How to clear all inputs, selects and also hidden fields in a form using jQuery?如何使用 jQuery 清除表单中的所有输入、选择和隐藏字段？
【发布时间】：2011-08-29 22:03:43
【问题描述】：

我想清除所有输入，选择表单中的所有隐藏字段。如果最适合，使用 jQuery 是一个选项。

最简单的方法是什么...我的意思是易于理解和维护。

[编辑]

解决方案不能与复选框混淆（值必须保留，但必须清除选中状态），也不能与提交按钮混淆。

我想要做的是一个清除按钮，它清除用户明确输入的所有选项，以及隐藏字段。

谢谢！

【问题讨论】：

标签： javascript jquery

【解决方案1】：

您可以使用reset() 方法：

$('#myform')[0].reset();

或者没有 jQuery：

document.getElementById('myform').reset();

其中myform 是包含要清除的元素的表单的ID。

如果字段不在表单内，您也可以使用:input 选择器：

$(':input').val('');

【讨论】：

reset() 不会这样做...如果表单已经带有值。此外，清除所有输入具有清除我的输入按钮和提交按钮的副作用......它也确实清除了复选框的值，这不是我正在寻找的行为。
@Miguel Angelo，然后尝试将它们从您的选择器中排除：$(':input').not(':checkbox, :submit').val('');

【解决方案2】：

使用 JQuery 清除所有输入，包括隐藏字段：

// Behold the power of JQuery.
$('input').val('');

选择更难，因为它们有一个固定的列表。您要清除该列表，还是仅清除选择。

可能是这样的

$('option').attr('selected', false);

【讨论】：

我只想清除选择，这样用户必须再次选择它。它基本上是一个清除表单按钮，但我需要它来清除所有用户选择。
如果我为复选框设置了 val，那么我就有麻烦了。我必须将检查状态更改为未检查...似乎没有单行代码可以完成所有操作。
另外，这会清除我的提交按钮和其他按钮的内容。
你是对的。 'input' 选择器选择所有元素。您可以通过使用'input[type="text"] 添加一些细微差别来仅获取文本元素。同样，您也可以选择复选框，并使用attr 清除checked 属性，就像在选项中清除selected 一样。但显然，表单元素本身也有reset 方法。我没有意识到这一点。只需要几行就可以清除我的方式中的每个元素，但无论如何重置表单会更整洁。
我将把这个答案留给演示，但我投票给 roXon 是第一个，而 Darin 则提供了一个非 JQuery 解决方案。

【解决方案3】：

$('#formID')[0].reset(); // Reset all form fields

【讨论】：

这让我明白了：未捕获的类型错误：无法读取未定义的属性“重置”
@CaseyCrookston $('#formID')[0] - [0] 将 JS 元素引用从 jQuery 对象中取出 - 因此它会隐式搜索您的页面以查找该元素。虽然$('#formID') 不会抛出任何错误（如果未找到该元素）——另一方面，对 JS 元素对象进行操作会抛出该错误。治愈？只需确保您的元素存在于您的页面上if($('#formID')[0]){ /*form exists*/ }。

【解决方案4】：

如果您想对特定数量的字段应用明确的值，则将 id 或 class 分配给它们并对其应用空值。像这样：

$('.all_fields').val('');

其中all_fields 是应用于所需输入字段以应用空值的类。它将保护您不想更改的其他字段为空。

【讨论】：

【解决方案5】：

我有一个稍微更专业的案例，一个搜索表单，其中包含一个自动完成人名的输入。 Javascript 代码设置了 from.reset() 无法清除的隐藏输入。

但是我不想重置所有隐藏的输入。在那里，我添加了一个类 search-value 到要清除的隐藏输入。

$('form#search-form').reset();
$('form#search-form input[type=hidden].search-value').val('');

【讨论】：

最佳答案。照顾隐藏和其他一切。
你的意思是$('form#search-form')[0].reset(); 对吧？

【解决方案6】：

为空所有输入标签，如输入、选择、textatea 等。运行此代码

$('#message').val('').change();

【讨论】：

【解决方案7】：

你可以把它放在你的 jquery 代码中，也可以单独使用：

window.onload = prep;

function prep(){
document.getElementById('somediv').onclick = function(){
document.getElementById('inputField').value ='';
  }
}

【讨论】：

这只会清除一个输入，如果表单中有更多输入，您会按 id 查询表单中的每个输入吗？
仅清除您通过 id 提供的输入字段。当您要确定要清除哪个字段以及要保留哪个字段时，此解决方案会有所帮助。我更喜欢这种方式（控制要清除的字段）然后 reset();。我对 reset() 有不好的体验，有时它会让一些数据在现场......
OP 写道 我想清除所有输入、选择以及所有表单中的隐藏字段 所以他不想填写任何字段。