javascript 如何使用 jQuery 在事件上重置表单元素（输入、选择、文本区域等）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18364393/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to reset forms elements (input,select,textarea,etc.) on events using jQuery
提问by Jim
I need to reset forms elements after click span for example.
例如，我需要在单击跨度后重置表单元素。
Is there a method to reset the from by jQuery without select each element and remove the attribute value.
有没有一种方法可以通过 jQuery 重置 from 而不选择每个元素并删除属性值。
Some of the elements not having attribute value like textarea or radio
一些没有属性值的元素，如textarea 或 radio
And some like buttonI don't want to remove the value from it.
有些像按钮，我不想从中删除值。
I want use jQuery to use the reset on other events
我想使用 jQuery 在其他事件上使用重置
Code for example http://jsfiddle.net/pgNrF/
代码例如http://jsfiddle.net/pgNrF/
<input type="button" value="Input Button">
<input type="checkbox">
<input type="hidden">
<textarea></textarea>
<span>Reset</span>
回答by adeneo
This is already built in if you wrap those form elements in an actual form:
如果您将这些表单元素包装在实际表单中，这已经内置了：
<form id="myform">
<input type="button" value="Input Button">
<input type="checkbox">
<input type="file">
<input type="hidden">
<input type="image">
<input type="password">
<input type="radio">
<input type="submit">
<input type="text">
<select>
<option>Option1</option>
<option>Option2</option>
<option>Option3</option>
</select>
<textarea></textarea>
<button type="button">Button</button>
<button type="reset">Reset</span>
</form>
If you just have to use jQuery:
如果您只需要使用 jQuery：
$('span').click(function() {
$('#myform').get(0).reset();
});
回答by Howard Brown
A late comment about resetting textareas.
关于重置 textarea 的最新评论。
Using Chrome version Version 54.0.2840.99 m on a PC running Windows 10 Home version, I found that the native/built-in reset function that is called by a regular/unmodified reset button or the form.reset() statement does restore the initial field value of a textarea, but only if the textarea was not previously programmatically cleared, say with a custom clear button that empties the textarea's innerHTML.
在运行Windows 10 Home 版本的PC 上使用Chrome 版本54.0.2840.99 m，我发现通过常规/未修改的重置按钮或form.reset() 语句调用的原生/内置重置功能确实恢复了初始textarea 的字段值，但前提是 textarea 之前没有以编程方式清除，比如使用自定义清除按钮清空 textarea 的innerHTML。
This isn't observable when the textarea is first loaded without a default value, but if the textarea is coded to show data from a previous posting of the form, then the textarea may not be empty, and resetting the textarea should set the field to the value that it had when the form was loaded.
当 textarea 在没有默认值的情况下首次加载时，这是无法观察到的，但是如果 textarea 被编码为显示表单先前发布的数据，则 textarea 可能不为空，并且重置 textarea 应该将该字段设置为加载表单时它的值。
What I found was that the textarea's defaultValue attribute that the native reset uses is incorrectly cleared when the textarea's innerHTML was emptied and then subsequent resets just clears the textarea rather than resetting textarea as expected. I consider this a bug because compared to clearing and resetting other text input fields, the textarea works differently.
我发现当 textarea 的 innerHTML 被清空时，原生重置使用的 textarea 的 defaultValue 属性被错误地清除，然后后续重置只会清除 textarea 而不是按预期重置 textarea。我认为这是一个错误，因为与清除和重置其他文本输入字段相比，textarea 的工作方式不同。
This 'odd-man-out' behavior can be worked-around by adding a custom initialValue attribute to a textarea and assigning the innerHTML value to the it. Since the native reset and custom clear function don't affect the custom attribute, the value is preserved, and can be used to restore the textarea's value by overriding a reset button to call a function that sets the textarea's innerHTML to the initialValue attribute's value and then calls the form.reset() function to handle the other input fields. Note that calling the form.reset() function causes the custom reset function called by the modified reset button to not execute any code after the form.reset().
可以通过向 textarea 添加自定义 initialValue 属性并将innerHTML值分配给它来解决这种“奇怪的人”行为。由于原生重置和自定义清除函数不影响自定义属性，因此该值被保留，并且可用于通过覆盖重置按钮调用将 textarea 的innerHTML 设置为initialValue 属性的值的函数来恢复textarea 的值和然后调用 form.reset() 函数来处理其他输入字段。请注意，调用form.reset() 函数会导致修改后的重置按钮调用的自定义重置函数在form.reset() 之后不执行任何代码。
回答by Moazzam Khan
if not using <form>, then using jQuery -
如果不使用<form>，则使用 jQuery -
$('span').click(function() {
$("input").val("")
$("select option").removeAttr("selected");
$("textarea").val("");
});
回答by Chinmay235
If you are not using the reset button please use this jquery code
如果您不使用重置按钮，请使用此 jquery 代码
$('span').click(function() {
$('input').val('');
$("textarea").val('');
});
回答by letiagoalves
Change
改变
<span>Reset</span>
to
到
<input type='reset' value='Reset'>
It was made to reset all form values to default values.
将所有表单值重置为默认值。
If you also need to unbind some events you can do it using jQuery:
如果您还需要取消绑定某些事件，您可以使用 jQuery 来完成：
$("input:reset").click(function() {
// unbind and reset what is left
});
