如何通过Js实现点击一组复选框，动态添加1个input输入框，输入框中自动填充所选复选框的内容呢？
比如有5个复选框，如何通过js实现点击复选框，动态添加1个input输入框，输入框中自动填充所选复选框的内容呢？...
比如有5个复选框，如何通过js实现点击复选框，动态添加1个input输入框，输入框中自动填充所选复选框的内容呢？
展开
展开全部
尝试如下代码，在 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>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>RunJS 演示代码</title>
<script>
var arr = [],inp;
onload = function(){
var cks = document.getElementsByName("ck");
for(var i = 0; i < cks.length; i++){
var cki = cks[i];
cki.onchange = function(){
if(this.checked){
if(!document.getElementById("inp")){
inp = document.createElement("input");
inp.type = "text";
inp.id = "inp";
ddv.appendChild(inp);
}
}else{
var yes = false;
for(var j=0;j<cks.length;j++){
if(cks[j].checked){
yes = true;
break;
}
}
if(!yes){
ddv.removeChild(inp);
}
}
inp = document.getElementById("inp");
if(!!inp){
arr = [];
for(var j=0;j<cks.length;j++){
if(cks[j].checked){
arr.push(cks[j].value);
}
}
inp.value=arr.join(",");
}
}
}
}
</script>
</head>
<body>
<label><input type="checkbox" name="ck" value="a" />a</label>
<label><input type="checkbox" name="ck" value="b" />b</label>
<label><input type="checkbox" name="ck" value="c" />c</label>
<label><input type="checkbox" name="ck" value="d" />d</label>
<label><input type="checkbox" name="ck" value="e" />e</label>
<div id="ddv">
</div>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
