Javascript 如何使用 jQuery 重置特定的表单字段

How to reset a particular form field using jQuery

提问by Manish Jangir

I want to know how to reset a particular form field using jQuery.

我想知道如何使用 jQuery 重置特定的表单字段。

I'm using the folowing function:

我正在使用以下功能：

function resetForm(id) {
    $('#'+id).each(function(){
        this.reset();
    });
}

but it is resetting all the fields. Is there any way to reset specific fields using jQuery or JavaScript? I want to reset only a particular field.

但它正在重置所有字段。有没有办法使用 jQuery 或 JavaScript 重置特定字段？我只想重置特定字段。

回答by Esailija

function resetForm(id) {
    $('#' + id).val(function() {
        return this.defaultValue;
    });
}

example without using id:

不使用 id 的示例：

http://jsfiddle.net/vYWdm/

http://jsfiddle.net/vYWdm/

回答by David says reinstate Monica

The reset()method affects the whole form, by design, to reset only particular inputelements, assuming that there's a Reset previous inputelement after eachinput`:

该reset()方法通过设计影响整个表单，仅重置特定input元素，假设存在重置先前输入输入element after each`：

$('button.reset').click(
    function(){
        var input = $(this).prev('input:first');
        input.val(''); // assuming you want it reset to an empty state;
    });

JS Fiddle demo

JS小提琴演示

To reset the inputto its original state, then first I'd recommend storing the original value in a data-*attribute for recollection:

要将 重置input为其原始状态，首先我建议将原始值存储在一个data-*属性中以供回忆：

$('input').each(
    function(){
        $(this).attr('data-originalValue',$(this).val());
    });

$('button.reset').click(
    function(){
        var input = $(this).prev('input:first');
        input.val(input.attr('data-originalValue'));
    });

JS Fiddle demo

JS小提琴演示

Given HTML similar to the following (in which the inputelements are grouped together):

给定类似于以下内容的 HTML（其中input元素组合在一起）：

<form action="#" method="post">
    <fieldset>
        <input value="something" />
        <button class="reset">Reset the input</button>
    </fieldset>
    <fieldset>
        <input type="checkbox" name="two"  />
        <input type="checkbox" name="two" checked />
        <input type="checkbox" name="two"  />
        <button class="reset">Reset the input</button>
    </fieldset>
    <fieldset>
        <input type="radio" name="three" checked />
        <input type="radio" name="three" />
        <button class="reset">Reset the input</button>
    </fieldset>
</form>

The following jQuery will reset the inputelements back to their page-load state:

以下 jQuery 会将input元素重置回它们的页面加载状态：

$('button.reset').click(
    function () {
        $(this).prevAll('input').val(function(){
            switch (this.type){
                case 'text':
                    return this.defaultValue;
                case 'checkbox':
                case 'radio':
                    this.checked = this.defaultChecked;
            }
        });
    });

JS Fiddle demo.

JS小提琴演示。

References:

参考：

• attr().
• prev().
• reset()
• val().

• attr().
• prev().
• reset()
• val().

回答by Antoine Pinsard

My approach would be to consider three cases: free-input-based fields, check-based fields and select-based fields.

我的方法是考虑三种情况：基于自由输入的字段、基于检查的字段和基于选择的字段。

$(set_of_fields).each(function() {
  // Don't bother checking the field type, just check if property exists
  // and set it
  if (typeof(this.defaultChecked) !== "undefined")
    this.checked = this.defaultChecked;
  if (typeof(this.defaultValue) !== "undefined")
    this.value = this.defaultValue;

  // Try to find an option with selected attribute (not property!)
  var defaultOption = $(this).find('option[selected]');
  // and fallback to the first option
  if (defaultOption.length === 0)
    defaultOption = $(this).find('option:first');
  // if no option was found, then it was not a select
  if (defaultOption.length > 0)
    this.value = defaultOption.attr('value');
});

Edit: I just noticed this won't work with <select multiple>fields.

编辑：我刚刚注意到这不适用于<select multiple>字段。

回答by Nicola Peluchetti

You could do (if you plan to use the reset()javascript method):

您可以这样做（如果您打算使用reset()javascript 方法）：

function resetForm(id) {
   document.getElementById(id).reset();
}

There is no need for jQuery as the method "reset" is a standard javascript method

不需要 jQuery，因为方法“重置”是标准的 javascript 方法