Jquery清空表单内容

悠悠 2023-03-01 13:28 100阅读 0赞

# JQuery :not() 选择器 #

定义与用法：

:not() 选择器选取除了指定元素以外的所有元素。

最常见的用法：与其他选择器一起使用，选取指定组合中除了指定元素以外的所有元素。

参考代码：

执行结果：

![Center][]

# HTML DOM reset() 方法或是 <input type="reset"> 元素 #

参考代码：

点击重置按钮前：

![Center 1][]

点击重置按钮后：

![Center 2][]  
得出结论：HTML DOM reset() 方法或是 <input type="reset"> 元素的真正作用并不是“清空” <input> 元素中的 value值，而是“重置”还原 <input> 元素中的原本的 value 值。值得注意的是，reset 不能重置按钮类型元素（type=button,reset,submit）的 value 值。

# 真正清空 form 表单中的内容（JQuery） #

参考代码：

点击“id=button”的按钮前：

![Center 3][]

点击"id=button"的按钮后：

![Center 4][]

# 后续补充： #

今天做项目又要清空 form 数据，遇到一个小问题，解决了很久才找到原因，发现上述代码还是有缺陷的。

我在前台需要清空 form value 数据，后台需要取一个 checkbox value 值，如果使用上面的代码就会出现后台取到的 checkbox value 值为空的情况。

所以在这里改进一下上面的代码，做到既能满足前台能移除 checkbox checked 属性，又能保留 checkbox value 值，radio 元素也一样：

$("#form :input").not(":button, :submit, :reset, :hidden, :checkbox, :radio").val("");                      
    
    $("#form :input").removeAttr("checked").remove("selected");

[Center]: /images/20230208/e6e474d1d7fb42f0acf06c4f1c1e5c5c.png
[Center 1]: /images/20230208/d5cb8e15148d40169e41c2d5909299e0.png
[Center 2]: https://img-blog.csdn.net/20141208224758793?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxMTUwNjk1MQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
[Center 3]: https://img-blog.csdn.net/20141208233539562?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxMTUwNjk1MQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
[Center 4]: https://img-blog.csdn.net/20141208233601132?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxMTUwNjk1MQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center