zoukankan      html  css  js  c++  java
  • jq真正清空表单数据(亲测 好用)

    工作中遇到复杂的表单,需要一次清空挺麻烦的,字段太多,不仅包含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)
            // }
            //}
        }
    }

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

  • 相关阅读:
    spring boot Mybatis 拦截器,实现拼接sql和修改
    spring security 5.x去除默认前缀
    Umengday08-hive数据仓库建设
    Umengday07-flume、kafka与hdfs日志流转
    Umengday01-nginx模块(环境平台搭建)
    Umeng项目day04
    Java代码~~汽车租赁系统
    java基础知识(一)
    自动化测试知识点杂记,后续再进行整理
    博客第一天
  • 原文地址:https://www.cnblogs.com/circleone/p/7140453.html
Copyright © 2011-2022 走看看