jq真正清空表单数据(亲测 好用)

Posted 2020-09-27 @circle

工作中遇到复杂的表单，需要一次清空挺麻烦的，字段太多，不仅包含input，还有select，radio，checkbox

于是乎，想一次清空也挺麻烦的，所以整理代码如下，供大家参考学习（本人也是菜鸟一枚，正在努力学习中......）

直接上jq代码：

$(":input"，"#myForm")
.not(":button",":reset","hidden","submit")
.val("")
.removeAttr("checked")
.removeAttr("selected");

另外需要备注的是：

一、$(":input");//选择的是所有元素，包括input,textarea,select,button

html代码：

<form>
    <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="reset" />
 
    <input type="submit" />
    <input type="text" />
    <select><option>Option</option></select>
 
    <textarea></textarea>
    <button>Button</button>
 
</form>

JQ代码：

$(":input")

二、js清空表单数据的方式

遍历页面的元素

function ClearForm(id) {
    var objId = document.getElementById(id);
    if (objId == undefined) {
        return;
    }
    for (var i = 0; i < objId.elements.length; i++) {
        if (objId.elements[i].type == "text") {
            objId.elements[i].value = "";
        }
        else if (objId.elements[i].type == "password") {
            objId.elements[i].value = "";
        }
        else if (objId.elements[i].type == "radio") {
            objId.elements[i].checked = false;
        }
        else if (objId.elements[i].type == "checkbox") {
            objId.elements[i].checked = false;
        }
        else if (objId.elements[i].type == "select-one") {
            objId.elements[i].options[0].selected = true;
        }
        else if (objId.elements[i].type == "select-multiple") {
            for (var j = 0; j < objId.elements[i].options.length; j++) {
                objId.elements[i].options[j].selected = false;
            }
        }
        else if (objId.elements[i].type == "textarea") {
            objId.elements[i].value = "";
        }
        //else if (objId.elements[i].type == "file") {
        // //objId.elements[i].select();
        // //document.selection.clear();
        // // for IE, Opera, Safari, Chrome
        // var file = objId.elements[i];
        // if (file.outerHTML) {
        // file.outerHTML = file.outerHTML;
        // } else {
        // file.value = ""; // FF(包括3.5)
        // }
        //}
    }
}

本人比较推荐第一种方式~