尝试如下代码,在 Friefox 54 及 IE 11 下测试可行
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<input type="checkbox" id="checkbox1" value="跑步"> 跑步
<input type="checkbox" id="checkbox2" value="打球"> 打球
<input type="checkbox" id="checkbox3" value="登山"> 登山
<input type="checkbox" id="checkbox4" value="游泳"> 游泳
<input type="checkbox" id="checkbox5" value="骑车"> 骑车
<div id="div1">
</div>
</body>
<script>
var objdiv = document.getElementById('div1');
for(i=1; i<6; ++i) {
var objchk = document.getElementById('checkbox' + i);
objchk.addEventListener('click', function(e) {
//获取当前正在点击的 Checkbox对象
var objchk = e.target;
//获取已生成的 Input 对象
var objipt_exist = document.getElementById('ipt' + objchk.id);
if(objchk.checked) {
//如果 Checkbox 选中状态下对应的 Input 已存在,就返回,以防重复添加Input
if(objipt_exist) {
return;
}
//如果文本框不存在,在 div1 容器中动态添加 Input
var objipt = document.createElement('input');
objipt.setAttribute('value', objchk.value);
objipt.setAttribute('id', 'ipt' + objchk.id);
objdiv.appendChild(objipt);
} else {
//从div1中移除已存在的 Input
objdiv.removeChild(objipt_exist);
}
}, false);
}
</script>
</html>