Javascript 如何使用jQuery在事件上重置表单元素（输入、选择、文本区域等）

例如，我需要在单击span后重置表单元素

是否有一种方法可以通过jQuery重置from，而无需选择每个元素并删除属性值

一些没有属性值的元素，如textarea或radio

还有一些像按钮，我不想删除它的值

我想使用jQuery在其他事件上使用重置

例如，代码

重置

更改

<span>Reset</span>

---

如果将这些表单元素包装到实际表单中，则这已经内置：

<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</button>
</form>

如果不使用

，则使用jQuery-

$('span').click(function() {
    $("input").val("")
    $("select option").removeAttr("selected");
    $("textarea").val("");
});

---

如果您没有使用重置按钮，请使用此jquery代码

 $('span').click(function() {
    $('input').val('');
    $("textarea").val('');

});

---

关于重置文本区域的最新评论

在运行Windows 10 Home版本的PC上使用Chrome版本54.0.2840.99 m，我发现由常规/未修改的重置按钮或form.reset（）语句调用的本机/内置重置函数确实会还原textarea的初始字段值，但前提是textarea之前未以编程方式清除，使用自定义的清除按钮清空textarea的innerHTML

当首次加载textarea时没有默认值，这是不可见的，但如果textarea编码为显示来自上一次表单发布的数据，则textarea可能不是空的，重置textarea应将字段设置为加载表单时的值

我发现，当textarea的innerHTML被清空时，本机重置使用的textarea的defaultValue属性被错误地清除，随后的重置只是清除textarea，而不是按预期重置textarea。我认为这是一个错误，因为与清除和重置其他文本输入字段相比，TeXTaReA的工作方式不同。

---

可以通过向textarea添加自定义initialValue属性并将innerHTML值分配给该属性来解决这种“奇怪的人”行为。由于本机重置和自定义清除函数不影响自定义属性，因此会保留该值，并可通过覆盖重置按钮来调用将textarea的innerHTML设置为initialValue属性值的函数，然后调用form.reset（）来使用该值还原textarea的值函数来处理其他输入字段。请注意，调用form.reset（）函数会导致修改后的reset按钮调用的自定义reset函数在form.reset（）之后不执行任何代码。

我需要使用jQuery在其他事件上重置我需要使用jQuery在其他事件上重置，而不是由用户重置click@Jim-添加了jQuery解决方案，您仍然应该调用本机的

form.reset（）

method。您可能希望了解通过jQuery重置表单的概念在哪里被详细讨论过。

<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</button>
</form>

$('span').click(function() {
    $('#myform').get(0).reset();
});

$('span').click(function() {
    $("input").val("")
    $("select option").removeAttr("selected");
    $("textarea").val("");
});

 $('span').click(function() {
    $('input').val('');
    $("textarea").val('');

});