js 动态增加 删除 html控件

igelf 2008-03-10 09:39:37
怎么在一个div里动态增加checkbox控件和label控件
...全文
220 15 打赏 收藏 举报
写回复
15 条回复
切换为时间正序
当前发帖距今超过3年,不再开放新的回复
发表回复
southkingfine 2008-03-10
[Quote=引用 10 楼 cooolbin 的回复:]
再顶
[/Quote]
  • 打赏
  • 举报
回复
呵呵
  • 打赏
  • 举报
回复
yixianggao 2008-03-10
送你三本手册!

DHTML参考手册
http://download.csdn.net/source/308913

样式表中文手册
http://download.csdn.net/source/304124

JScript语言参考
http://download.csdn.net/source/308916
  • 打赏
  • 举报
回复
yixianggao 2008-03-10
写个能增能减的,再试试

<!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>
<title> new document </title>
<meta name="generator" content="editplus" />
<meta name="author" content="Gao YiXiang" />
<meta name="email" content="yixianggao@126.com" />
<meta name="keywords" content="javascript dhtml dom" />
<meta name="description" content="I love web development." />
</head>
<body>
<input type="button" id="btnAddChk" value="Add CheckBox" />
<input type="button" id="btnRemoveChk" value="Remove Selected CheckBoxes" />
<div id="divContainer"></div>
</body>
<script type="text/javascript">
<!--
function $(sId)
{
return document.getElementById(sId);
}

var oCon = $("divContainer");

var iIndex = 0;

$("btnAddChk").onclick = function()
{
var oSection = document.createElement("div");
oCon.appendChild(oSection);

var oChk = document.createElement("input");
oChk.type = "checkbox";
oChk.id = "chk" + iIndex++;
oSection.appendChild(oChk);

var oLab = document.createElement("label");
oLab.htmlFor = oChk.id;
oLab.innerHTML = "label for " + oLab.htmlFor;
oSection.appendChild(oLab);
};

$("btnRemoveChk").onclick = function()
{
var bIsSelected = false;
var cChk = oCon.getElementsByTagName("input");
for (var i=cChk.length-1; i>=0; i--)
{
if (cChk[i].type.toLowerCase() == "checkbox" && cChk[i].checked)
{
bIsSelected = true;
oCon.removeChild(cChk[i].parentNode);
}
}
if (!bIsSelected)
{
alert("Please selected!");
}
}
//-->
</script>
</html>
  • 打赏
  • 举报
回复
LeeeeSin 2008-03-10
再顶
  • 打赏
  • 举报
回复
igelf 2008-03-10
知道了.
  • 打赏
  • 举报
回复
LeeeeSin 2008-03-10
http://www.cnblogs.com/xiaotaomaomao/articles/986065.html
  • 打赏
  • 举报
回复
hy_lihuan 2008-03-10
就是楼上说的,自己写html当作字符串传到div里面
  • 打赏
  • 举报
回复
yixianggao 2008-03-10
试试看

<!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>
<title> new document </title>
<meta name="generator" content="editplus" />
<meta name="author" content="Gao YiXiang" />
<meta name="email" content="yixianggao@126.com" />
<meta name="keywords" content="javascript dhtml dom" />
<meta name="description" content="I love web development." />
</head>
<body>
<input type="button" id="btnAddChk" value="Add CheckBox" />
<div id="divContainer"></div>
</body>
<script type="text/javascript">
<!--
function $(sId)
{
return document.getElementById(sId);
}

var oCon = $("divContainer");

var iCounter = 0;

$("btnAddChk").onclick = function()
{
var oChk = document.createElement("input");
oChk.type = "checkbox";
oChk.id = "chk" + iCounter++;
oCon.appendChild(oChk);

var oLab = document.createElement("label");
oLab.htmlFor = oChk.id;
oLab.innerHTML = "label for " + oLab.htmlFor;
oCon.appendChild(oLab);

var oBr = document.createElement("br");
oCon.appendChild(oBr);
};
//-->
</script>
</html>
  • 打赏
  • 举报
回复
西安风影 2008-03-10
<script>
function hehe()
{
document.getElementById("div1").innerHTML="<span>hehe</span><input type='checkbox' name='hehe' />"
}
</script>
<div id="div1">
</div>
<input type="button" value="Add" onclick="hehe()" />
  • 打赏
  • 举报
回复
LeeeeSin 2008-03-10
在后台输出 respose.write("<script>根据ID给层加控件</script>")
  • 打赏
  • 举报
回复
myvicy 2008-03-10
同意楼上。
  • 打赏
  • 举报
回复
tantaiyizu 2008-03-10

单纯增加 可以用 innerHTML += "<input type='checkbox' />";
  • 打赏
  • 举报
回复
dd
  • 打赏
  • 举报
回复
相关推荐
发帖
JavaScript
加入

8.6w+

社区成员

Web 开发 JavaScript
申请成为版主
帖子事件
创建了帖子
2008-03-10 09:39
社区公告
暂无公告