使用jQuery重置多阶段表单

Question

使用jQuery重置多阶段表单我有一个带有标准重置按钮的表单，编码如下：<input type="reset" class="button standard" value="Clear" />问题是，所谓的表单是多阶段排序的，所以如果用户填写了一个阶段，然后稍后返回，各个字段的“记住”值将不会在单击“清除”按钮时重置。我认为，附加一个jQuery函数来循环所有字段并“手动”清除它们就可以了。我已经在表单中使用了jQuery，但只是跟上了速度&所以我不知道如何做到这一点，除了通过ID单独引用每个字段之外，这似乎不太有效。蒂娅需要任何帮助。

Answer 1

在我最初回答这个问题的两年后，我回来发现这个问题已经变成了一团乱。我觉得是时候回过头来，让我的答案真正正确，因为它是最令人兴奋的+接受。

为了记录在案，Titi的回答是错误的，因为这不是最初的海报所要求的-使用本机Reset()方法重置表单是正确的，但是这个问题是试图清除表单中的记住值，如果您以这种方式重置的话，这些值将保留在表单中。这就是为什么需要“手动”重置。我想大多数人最终都会在Google搜索中问到这个问题，并且正在真正地寻找Reset()方法，但对于OP所讨论的具体情况，它不起作用。

我的原版答案是：

// not correct, use answer below$(':input','#myform').not(':button, :submit, :reset, :hidden').val('').removeAttr('checke在我最初回答这个问题
的两年后，我回来发现这个问题已经变成了一团乱。我觉得是时候回过头来，让我的答案真正正确，因为它是最令人兴奋的+接受。为了记录在案，Titi的回答
是错误的，因为这不是最初的海报所要求的-使用本机Reset()方法重置表单是正确的，但是这个问题是试图清除表单中的记住值，如果您以这种方式重置的话，
这些值将保留在表单中。这就是为什么需要“手动”重置。我想大多数人最终都会在Google搜索中问到这个问题，并且正在真正地寻找Reset()方法，但对于OP
所讨论的具体情况，它不起作用。我的原版答案是：// not correct, use answer below$(':input','#myform').not(':button, :submit, :reset, :hidden
').val('').removeAttr('checked').removeAttr('selected');这可能适用于许多情况，包括OP，但正如注释和其他答案中所指出的，它将清除任何值属性中的
收音机/复选框元素。更多对，是这样答案(但不完美)是：function resetForm($form) {    $form.find('input:text, input:password, input:file, selec
t, textarea').val('');    $form.find('input:radio, input:checkbox')         .removeAttr('checked').removeAttr('selected');}// to call, use
:resetForm($('#myform')); // by id, recommendedresetForm($('form[name=myName]')); // by name使用:text, :radio等，选择器本身被jQuery认为是
错误的实践，因为它们最终评估为*:text这使得它花费的时间比它应该花的时间要长得多。我确实更喜欢白名单的方法，并希望我在我最初的答案中使用它。
无论如何，通过指定input选择器的一部分，加上Form元素的缓存，这将使它成为这里性能最好的答案。如果人们对SELECT元素的默认设置不是一个具有空白
值的选项，那么这个答案可能仍然有一些缺陷，但是它肯定是一个通用的选项，而且它将需要逐个案例地处理。d').removeAttr('selected');

这可能适用于许多情况，包括OP，但正如注释和其他答案中所指出的，它将清除任何值属性中的收音机/复选框元素。

更多对，是这样答案(但不完美)是：

function resetForm($form) {
    $form.find('input:text, input:password, input:file, select, textarea').val('');
    $form.find('input:radio, input:checkbox')
         .removeAttr('checked').removeAttr('selected');}// to call, use:resetForm($('#myform')); 
         // by id, recommendedresetForm($('form[name=myName]')); // by name

使用:text, :radio等，选择器本身被jQuery认为是错误的实践，因为它们最终评估为*:text这使得它花费的时间比它应该花的时间要长得多。我确实更喜欢白名单的方法，并希望我在我最初的答案中使用它。无论如何，通过指定input选择器的一部分，加上Form元素的缓存，这将使它成为这里性能最好的答案。

如果人们对SELECT元素的默认设置不是一个具有空白值的选项，那么这个答案可能仍然有一些缺陷，但是它肯定是一个通用的选项，而且它将需要逐个案例地处理。

Answer 2

保罗接受的答案有一个很大的问题。考虑：

$(':input','#myform')
 .not(':button, :submit, :reset, :hidden')
 .val('')
 .removeAttr('checked')
 .removeAttr('selected');

这个.val('')行也将清除任何value被分配到复选框和单选按钮。所以如果你(像我一样)做这样的事情：

<input type="checkbox" name="list[]" value="one" /><input type="checkbox" name="list[]" value="two" checked="checked" />
<input type="checkbox" name="list[]" value="three" />

使用已接受的答案将您的输入转换为：

<input type="checkbox" name="list[]" value="" /><input type="checkbox" name="list[]" value="" /><input type="checkbox" name="list[]" value="" />

噢-我在用那个值！

下面是一个修改后的版本，它将保留复选框和无线电值：

// Use a whitelist of fields to minimize unintended side effects.$('INPUT:text, INPUT:password, INPUT:file, SELECT, TEXTAREA', '#myFormId')
.val('');  // De-select any checkboxes, radios and drop-down menus$('INPUT:checkbox, INPUT:radio', '#myFormId').removeAttr('checked')
.removeAttr('selected');