js实现清除表单的方法

     在web项目的开发中，查询功能不可或缺。在查询表单中一般都会有两个按钮，一个是用来提交表单的查询按钮，一个是清除查询条件的清除按钮。如果查询条件 较少，自己手动写个清除表单各控件输入值的js方法也未为不可，但如果查询条件多大十几个，清除各类控件输入值的代码也几乎千篇一律，看起来未免累赘，所 以如果有一个公用方法供调用当然最好。在此需注意的一点是，重置按钮与清除按钮的功能是截然不同的，重置按钮是把表单中各控件的值设为默认值，而请除按钮 是把值清空。

1. 因为表单中各元素值的清除方法略有差异，所以必须通过元素的type属性来获取元素的类型

<form name="userForm" method="post">
    <input type="text" name="username"/>
    <input type="password" name="passwd"/>
    <input type="radio" name="sex" value="0"/>
    <input type="radio" name="sex" value="1"/>
    <input type="radio" name="group" value="js"/>
    <input type="radio" name="group" value="java"/>
   
    <input type="checkbox" name="apple" value="apple1"/>
    <input type="checkbox" name="apple" value="apple2"/>
   
    <input type="checkbox" name="banana" value="banana"/>
    <input type="checkbox" name="egg" value="egg"/>
   
    <select name="country">
        <option value="">请选择</option>
        <option value="cn">中国</option>
        <option value="en">英国</option>
        <option value="us">美国</option>
    </select>
    <select name="loveGirl" multiple="true">
        <option value="">请选择</option>
        <option value="pjl">潘金莲</option>
        <option value="dj">妲己</option>
        <option value="cx">慈禧</option>
    </select>
   
    <input type="file" name="uploadFile"/>
   
    <textarea name="content" rows="4" cols="20" ></textarea>
   
    <input type="reset" value="重置"/>
    <input type="button" name="clear" value="清除" onclick="clearForm('userForm');return false;"/>
</form>

<script type="text/javascript">
function clearForm(form)
{
    var formObj = document.getElementsByName(form)[0];
    if(formObj == undefined)
    {
        return;
    }
   
    for(var i=0; i<formObj.elements.length; i++)
    {
        if(formObj.elements[i].type == "text")
        {
            formObj.elements[i].value = "";
        }
        else if(formObj.elements[i].type == "password")
        {
            formObj.elements[i].value = "";
        }
        else if(formObj.elements[i].type == "radio")
        {
            formObj.elements[i].checked = false;
        }
        else if(formObj.elements[i].type == "checkbox")
        {
            formObj.elements[i].checked = false;
        }
        else if(formObj.elements[i].type == "select-one")
        {
            formObj.elements[i].options[0].selected = true;
        }
        else if(formObj.elements[i].type == "select-multiple")
        {   
            for(var j = 0; j < formObj.elements[i].options.length; j++)
            {
                formObj.elements[i].options[j].selected = false;
            }
        }
        else if(formObj.elements[i].type == "file")
        {
            //formObj.elements[i].select();
            //document.selection.clear();            
            // for IE, Opera, Safari, Chrome
            var file = formObj.elements[i];
             if (file.outerHTML) {
                 file.outerHTML = file.outerHTML;
             } else {
                 file.value = "";  // FF(包括3.5)
            }
        }
        else if(formObj.elements[i].type == "textarea")
        {
            formObj.elements[i].value = "";
        }
    }
   
}
</script>风之境地 java-javascript 蘑菇街女装