使用复选框添加显示隐藏层

最新推荐文章于 2021-04-20 12:48:42 发布

缺少对象

最新推荐文章于 2021-04-20 12:48:42 发布

阅读量451

点赞数

分类专栏： javascript 文章标签： input function xhtml image button file

javascript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>使用复选框添加显示隐藏层</title>
<script language="javascript">
var i =2;//设置基数为2
function addFile(){
   var dv = document.getElementById("dvFiles");//设置生成表单内容的容器，即放置位置
   var file = document.createElement("input");//建立input标记的内容
   file.type = "text";//设置类型
   file.id = file.name = "image" + i;//设置id和名称
   dv.appendChild(file);//在容器里添加
   var btn = document.createElement("input");//建立input标记内容
   btn.type = "button";//类型
   btn.id = btn.name="btn"+i;//id和名称
   btn.value = "删除";//内容值
   btn.onclick = function() {//单击调用函数
       var b = document.getElementById(btn.id);//获得相关内容
       dv.removeChild(b.nextSibling); //remove <BR>//删除
       dv.removeChild(b.previousSibling); //file
       dv.removeChild(b); //btn
   }
   dv.appendChild(btn);
   dv.appendChild(document.createElement("BR")); //打印换行
}

</script>
</head>
<body>
<input type="text" name="image1" />
<div id="dvFiles"></div>
<input type="button" name="Submit" value="添加上传" onClick="addFile()" />
</body>

</html>

效果图如下：