`

重置按钮

 
阅读更多
页面添加重置按钮,可用于添加页面,编辑页面(思路:先把加载后的页面中需要重置的值先存储在各自的map中,重置时覆盖回去)

<script type="text/javascript">    
    var inputTextMap = {}; //<input type="text">
    var inputFileMap = {};//<inoput type="file">
    var textareaMap = {};//<textarea ...>
    var inputRadioMap = {};//<input type="radio">
    var inputCheckboxMap = {};//<input type="checkbox">
    var selectMap = {};//select下拉框
    var imgMap = {};//<img id="" src="...">
    $("#pageContent input[type='text']").each(function(){//pageContent 为从id为pageContent 的标签下查找
        inputTextMap[$(this).attr("name")] = $(this).val();
      });
    $("#pageContent input[type='file']").each(function(){
        inputFileMap[$(this).attr("name")] = $(this).val();
      });
    $("#pageContent textarea").each(function(){
        textareaMap[$(this).attr("name")] = $(this).text();
      });
    $("#pageContent input[type='radio']:checked").each(function(){
        inputRadioMap[$(this).attr("name")] = $(this).val();
      });
    $("#pageContent input[type='checkbox']").each(function(){
        if($(this).attr("checked")=="checked"){
            inputCheckboxMap[$(this).attr("name")+","+$(this).attr("value")] = "checked";
        }else{
            inputCheckboxMap[$(this).attr("name")+","+$(this).attr("value")] = "unchecked";
        }
      });
    $('#pageContent select').each(function(){
        selectMap[$(this).attr("id")] = $(this).val();
    });
    $("#pageContent img").each(function(){
        imgMap[$(this).attr("id")] = $(this).attr("src");
      });
    function inputTextReset(){
        for(var name in inputTextMap){
            if(inputTextMap.hasOwnProperty(name)){
                $("input[name='"+ name +"']").val(inputTextMap[name]);
            }
        }
    }
    function inputFileReset(){
        for(var name in inputFileMap){
            if(inputFileMap.hasOwnProperty(name)){
                $("input[name='"+ name +"']").val(inputFileMap[name]);
            }
        }   
    }
    function textareaReset(){
        for(var name in textareaMap){
            if(textareaMap.hasOwnProperty(name)){
                $("textarea[name='"+ name +"']").val(textareaMap[name]);
            }
        }
    }
    function inputRadioReset(){
        $.each(inputRadioMap,function(key,value){
            $("input:radio:[name='"+key+"']:[value='"+value+"']").attr("checked",true);
        });
    }
    function inputCheckboxReset(){
        $.each(inputCheckboxMap,function(key,value){
            if('checked' == value){
                $("input:checkbox:[name='"+key.split(",")[0]+"']:[value='"+key.split(",")[1]+"']").attr("checked", "checked");
            }else{
                $("input:checkbox:[name='"+key.split(",")[0]+"']:[value='"+key.split(",")[1]+"']").removeAttr("checked");
            }
        });
    }
    function selectReset(){
        $.each(selectMap,function(key,value){
            $("#"+key+" option[value = '"+value+"']").attr("selected","selected");
        });
    }
    function imgReset(){
        $.each(imgMap,function(key,value){
            $("#"+key).attr("src",value);
        });
    }
    function allReset(){
        inputTextReset();
        inputFileReset();
        textareaReset();
        inputRadioReset();
        inputCheckboxReset();
        selectReset();
        imgReset();
    }
</script>

写一个按钮触发
<button type="button" onclick="allReset()" >重置页面</button>
分享到:
评论

相关推荐

    图片做提交按钮和重置按钮编程技术

    ### 图片作为提交按钮与重置按钮的编程技术 #### 一、背景介绍 在现代网页设计中,视觉效果对于吸引用户和提升用户体验至关重要。传统的文本提交按钮和重置按钮虽然简单实用,但在某些场景下可能显得较为单调。为此...

    点击重置按钮,提示是否确认重置表单

    点击重置按钮,提示是否确认重置表单

    Angular2搜索和重置按钮过场动画

    本示例关注的是在搜索和重置按钮上实现这样的动画。Angular2提供了强大的动画支持,通过`@angular/animations`模块,我们可以创建丰富的动画效果。 首先,我们需要引入所需的动画指令。在`project.component.ts`中...

    layui 点击重置按钮, select 并没有被重置的解决方法

    因此,如果在页面加载时没有加载form组件,或者没有进行实例化,那么select元素就可能不会被自动修饰,从而导致重置按钮无法正常工作。 为了确保select元素和其他表单元素能够正确地被修饰,需要在使用Layui时,...

    Arduino-像按钮一样使用重置按钮-项目开发

    **Arduino-像按钮一样使用重置按钮 - 项目开发** 在Arduino Uno的开发过程中,我们经常需要使用到各种输入设备,如按钮。然而,你是否想过将Arduino的重置按钮作为一个功能按钮来使用呢?这个项目就是关于如何利用...

    Bootstrap按钮功能之查询按钮和重置按钮

    在本教程中,我们将探讨如何在Bootstrap环境中实现查询按钮和重置按钮的功能,这在数据检索和展示列表时非常常见。 首先,我们要理解问题背景。通常在数据查询界面,用户需要输入查询条件,例如学号(`stuNo`)和...

    Jquery和CSS实现选择框重置按钮功能

    此外,我们还添加了一个`&lt;div&gt;`元素,用于显示所选颜色并包含一个"×"图标,作为重置按钮: ```html &lt;option value=""&gt;Select a color.. &lt;option value="red"&gt;Red &lt;option value="green"&gt;Green ...

    JSP 重置按钮清空传入的表单数据实例

    标题和描述中提到的知识点是关于在JSP(Java Server Pages)中如何使用重置按钮来清空表单数据的实例。这里使用了jQuery这一流行的JavaScript库来实现表单的清空操作,具有一定的实用价值,适合对Web开发感兴趣的...

    ASP.NET—017:ASP.NET中清空按钮的实现

    在ASP.NET中,我们经常需要处理用户输入,并且有时会遇到需求,需要提供一个“清空”或“重置”按钮,以便用户可以快速清除表单中的所有输入。本文将详细介绍如何在ASP.NET中实现这样一个功能。 首先,我们需要理解...

    如何使用图片按钮作为重置(reset)表单按钮

    我们在做表单的时候往往会设置一个提交按钮和一个重置按钮,有时可能会为了页面的好看而使用一些小图片来代替这些按钮,对于提交按钮使用图片的方法非常简单,相信大家都会。那么如何使用图片按钮作为重置(reset)...

    JavaScript_StopWatch:具有启动,停止和重置按钮功能的秒表

    3. **重置按钮**:重置按钮用于将计时器归零。这涉及到清除计时器(如停止按钮所做的那样),然后将显示的时间设置为初始值,通常是0。 实现JavaScript StopWatch时,可能的代码结构如下: ```javascript let ...

    隐身模式重置按钮「Incognito Mode Reset Button」-crx插件

    这是该扩展程序的目的:隐身模式重置按钮删除了在一段时间内正在运行的隐身会话中积累的所有数据-历史记录,缓存,Cookie ... ...,而不必关闭所有隐身选项卡。当前无法执行此操作-您要么必须关闭所有隐身选项卡并...

    VC实现按钮重绘,修改后做自己喜欢的按钮

    在VC++编程环境中,我们经常会遇到需要自定义控件外观的需求,比如修改默认的按钮样式。这个主题就是关于如何在VC++中实现按钮的自定义重绘,使其根据BMP位图显示不同的状态。以下是对这个知识点的详细阐述: 1. **...

    CounterTimer:Swift APP 显示计数和秒间隔,带有开始、暂停和重置按钮

    计数器定时器Swift APP 显示计数和秒间隔,带有开始、暂停和重置按钮打开Xcode并创建一个新项目“CouterTimer” 新建项目 --&gt; 单页应用程序语言 : 快速创建项目后自动生成的文件AppDelegate.swift ViewController...

    计数器:使用JS编码的数字计数器加,减和重置按钮

    点击重置按钮则将`count`设回0。 在实际应用中,我们可能需要考虑一些额外的细节,比如限制计数范围、处理非整数计数或者添加动画效果。例如,我们可以使用`Math.min`和`Math.max`函数来限制计数器的最小值和最大值...

    apu-led-button:用于PC Engine的APU系统板Linux内核模块,用于访问前部LED和重置按钮

    此外,按下正面的重置按钮至少一秒钟会发出蜂鸣声并软重启APU。 有关请参见。安装 # sudo apt-get install linux-headers-$(uname -r) build-essential# git clone https://github.com/trick77/apu-led-button# cd

    使用JavaScript实现网页秒表功能(含开始、暂停、继续、重置功能)

    - `oReset.onclick`: 重置按钮被点击时,将所有计数器重置为0,并恢复`&lt;div&gt;`内容为初始状态,同时启用开始按钮,禁用其他按钮。 4. **时间更新函数`setTimeStr`**: - 这个函数负责根据毫秒计数器`ms`的值更新...

    AT89C51常见的复位电路

    2. 手动按钮复位电路:这种电路中,用户可以通过按下按钮触发复位。按钮与一个上拉电阻并联,按下按钮时,复位引脚被拉低,单片机复位。松开按钮后,上拉电阻使复位引脚恢复高电平,系统恢复正常运行。 3. 自动看门...

Global site tag (gtag.js) - Google Analytics