`

重置按钮

 
阅读更多
页面添加重置按钮,可用于添加页面,编辑页面(思路:先把加载后的页面中需要重置的值先存储在各自的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>
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics