[jQuery] 真正意義上清空表單內容
阿新 • • 發佈:2019-02-16
JQuery :not() 選擇器
定義與用法:
:not() 選擇器選取除了指定元素以外的所有元素。
最常見的用法:與其他選擇器一起使用,選取指定組合中除了指定元素以外的所有元素。
參考程式碼:
執行結果:<script> $(function() { $("p:not(#p1)").css("color", "red"); //寫法一 $("p").not("#p1").css("color", "red"); //寫法二 }) </script> <p id="p1">Hello</p> <p id="p2">Hello Again</p>
HTML DOM reset() 方法或是 <input type="reset"> 元素
參考程式碼:
<script>
$(function() {
$("#form1 :input").val("value");
})
</script>
<form id="form1">
<input type="text" value="text" />
<input type="reset" value="reset" />
</form>
點選重置按鈕前:點選重置按鈕後:
得出結論:HTML DOM reset() 方法或是 <input type="reset"> 元素的真正作用並不是“清空” <input> 元素中的 value值,而是“重置”還原 <input> 元素中的原本的 value 值。值得注意的是,reset 不能重置按鈕型別元素(type=button,reset,submit)的 value 值。
真正清空 form 表單中的內容(JQuery)
參考程式碼:
點選“id=button”的按鈕前:<script> $(function() { $("#button").click(function() { $("#form :input").not(":button, :submit, :reset, :hidden").val("").removeAttr("checked").remove("selected");//核心 }); }) </script> <form id="form"> <input type="radio" checked="checked" /> <input type="checkbox" checked="checked" /> <select> <option>option1</option> <option selected="selected">option2</option> </select> <input type="text" value="text" /> <input type="hidden" value="hidden" /> <input type="button" value="button" /> <input type="reset" value="reset" /> <input type="submit" value="submit" /> </form> <button id="button">真正清空</button>
點選"id=button"的按鈕後:
後續補充:
今天做專案又要清空 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");