Jquery真正意义上清空表单内容

[jQuery] 真正意义上清空表单内容

标签： JQueryformreset清空表单内容重置表单内容

2014-12-08 21:55  2554人阅读  评论(0)  收藏  举报

  分类：

jQuery（2） 

版权声明：本文为博主原创文章，未经博主允许不得转载。

目录(?)[+]

JQuery :not() 选择器

定义与用法：

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

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

参考代码：

[html]  view plain  copy

1. <script>  
2.     $(function() {  
3.         $("p:not(#p1)").css("color", "red"); //写法一  
4.         $("p").not("#p1").css("color", "red"); //写法二  
5.     })  
6. </script>  
7.   
8. <p id="p1">Hello</p>  
9. <p id="p2">Hello Again</p>  

执行结果：

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

参考代码：

[html]  view plain  copy

1. <script>  
2.     $(function() {  
3.         $("#form1 :input").val("value");  
4.     })  
5. </script>  
6.   
7. <form id="form1">  
8.     <input type="text" value="text" />  
9.     <input type="reset" value="reset" />  
10. </form>  

点击重置按钮前：

点击重置按钮后：

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

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

参考代码：

[html]  view plain  copy

1. <script>  
2.     $(function() {  
3.         $("#button").click(function() {  
4.             $("#form :input").not(":button, :submit, :reset, :hidden").val("").removeAttr("checked").remove("selected");//核心 IE11及以上用这个
5.     $('form')[0].reset();//IE11以下用这个
6.         });  
7.     })  
8. </script>  
9.   
10. <form id="form">  
11.     <input type="radio" checked="checked" />  
12.     <input type="checkbox" checked="checked" />  
13.     <select>  
14.         <option>option1</option>  
15.         <option selected="selected">option2</option>  
16.     </select>  
17.     <input type="text" value="text" />  
18.       
19.     <input type="hidden" value="hidden" />  
20.     <input type="button" value="button" />  
21.     <input type="reset" value="reset" />  
22.     <input type="submit" value="submit" />  
23. </form>  
24.   
25. <button id="button">真正清空</button>  

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

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

后续补充：

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

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

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

[javascript]  view plain  copy

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