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 蘑菇街女装