jQuery插件

我创建了一个jQuery插件，这样我就可以在任何需要的地方轻松使用它:

jQuery.fn.clear = function()
{
    var $form = $(this);

    $form.find('input:text, input:password, input:file, textarea').val('');
    $form.find('select option:selected').removeAttr('selected');
    $form.find('input:checkbox, input:radio').removeAttr('checked');

    return this;
}; 

所以现在我可以通过调用:

$('#my-form').clear();

2012年3月更新。

所以，在我最初回答这个问题的两年后，我回头看看，它已经变成了一个大混乱。我觉得是时候回到这个问题上来，让我的答案真正正确了，因为它得到了最多的好评和接受。

For the record, Titi's answer is wrong as it is not what the original poster asked for - it is correct that it is possible to reset a form using the native reset() method, but this question is trying to clear a form off of remembered values that would remain in the form if you reset it this way. This is why a "manual" reset is needed. I assume most people ended up in this question from a Google search and are truly looking for the reset() method, but it does not work for the specific case the OP is talking about.

我最初的回答是这样的:

// 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, select, textarea').val('');
    $form.find('input:radio, input:checkbox')
         .removeAttr('checked').removeAttr('selected');
}

// to call, use:
resetForm($('#myform')); // by id, recommended
resetForm($('form[name=myName]')); // by name

jQuery认为，单独使用:text、:radio等选择器是一种糟糕的做法，因为它们最终会求值为*:text，这会花费比正常情况下更长的时间。我确实更喜欢白名单的方法，希望我在最初的回答中使用了它。无论如何，通过指定选择器的输入部分，加上表单元素的缓存，这应该使它成为这里性能最好的答案。

如果人们默认的选择元素不是一个空值的选项，那么这个答案可能仍然有一些缺陷，但它肯定是通用的，这将需要根据具体情况进行处理。

这里有一些东西可以让你开始

$('form') // match your correct form 
.find('input[type!=submit], input[type!=reset]') // don't reset submit or reset
.val(''); // set their value to blank

当然，如果你有复选框/单选按钮，你将需要修改这包括他们以及设置。attr({'checked': false});

编辑 Paolo的回答更加简洁。我的回答更啰嗦，因为我不知道:input选择器，也没有想过简单地删除选中的属性。

您可能会发现，没有jQuery实际上更容易解决这个问题。

在常规JavaScript中，这非常简单:

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

我总是试图记住，虽然我们使用jQuery来增强和加速我们的编码，但有时它实际上并没有更快。在这些情况下，使用另一种方法通常会更好。

基本上，提供的解决方案没有一个能让我满意。 正如一些人指出的那样，他们会清空表单，而不是重新设置。

然而，有一些javascript属性可以帮助你:

文本字段的defaultValue defaultChecked用于复选框和单选按钮 defaultSelected用于选择选项

它们存储页面加载时字段的值。

写一个jQuery插件现在是微不足道的: (对于没有耐心的人来说……这是一个演示http://jsfiddle.net/kritzikratzi/N8fEF/1/)

插件代码

(function( $ ){
    $.fn.resetValue = function() {  
        return this.each(function() {
            var $this = $(this); 
            var node = this.nodeName.toLowerCase(); 
            var type = $this.attr( "type" ); 

            if( node == "input" && ( type == "text" || type == "password" ) ){
                this.value = this.defaultValue; 
            }
            else if( node == "input" && ( type == "radio" || type == "checkbox" ) ){
                this.checked = this.defaultChecked; 
            }
            else if( node == "input" && ( type == "button" || type == "submit" || type="reset" ) ){ 
                // we really don't care 
            }
            else if( node == "select" ){
                this.selectedIndex = $this.find( "option" ).filter( function(){
                    return this.defaultSelected == true; 
                } ).index();
            }
            else if( node == "textarea" ){
                this.value = this.defaultValue; 
            }
            // not good... unknown element, guess around
            else if( this.hasOwnProperty( "defaultValue" ) ){
                this.value = this.defaultValue; 
            }
            else{
                // panic! must be some html5 crazyness
            }
        });
    }
} )(jQuery);

使用

// reset a bunch of fields
$( "#input1, #input2, #select1" ).resetValue(); 

// reset a group of radio buttons
$( "input[name=myRadioGroup]" ).resetValue(); 

// reset all fields in a certain container
$( "#someContainer :input" ).resetValue(); 

// reset all fields
$( ":input" ).resetValue(); 

// note that resetting all fields is better with the javascript-builtin command: 
$( "#myForm" ).get(0).reset(); 

一些笔记……

我还没有研究新的html5表单元素，有些元素可能需要特殊处理，但同样的想法应该可以工作。 元素需要直接引用。例如$("#container"). resetvalue()将不起作用。总是使用$("#container:input")代替。 如上所述，这里是一个演示:http://jsfiddle.net/kritzikratzi/N8fEF/1/

保罗接受的答案有个大问题。考虑:

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

.val(")行还将清除分配给复选框和单选按钮的任何值。所以如果你(像我一样)做这样的事情:

<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');