重置按钮

最新推荐文章于 2024-07-21 11:35:59 发布

原创最新推荐文章于 2024-07-21 11:35:59 发布 · 1.3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#c/c++ #javascript #ViewUI

js&jquery 专栏收录该内容

12 篇文章

订阅专栏

本文介绍了一种在网页上实现重置功能的方法，通过将页面加载后的初始状态存储到不同的映射(map)中，当点击重置按钮时，可以从这些映射中恢复各个元素的状态，包括文本输入框、文件输入、文本区域、单选按钮、复选框、下拉菜单、图片等。

[b][size=medium]页面添加重置按钮，可用于添加页面，编辑页面（思路：先把加载后的页面中需要重置的值先存储在各自的map中，重置时覆盖回去）[/size][/b]

<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>