如何通过Js实现点击一组复选框，动态添加1个input输入框，输入框中自动填充所选复选框的内容呢？

比如有5个复选框，如何通过js实现点击复选框，动态添加1个input输入框，输入框中自动填充所选复选框的内容呢？

推荐答案 2017-08-14

尝试如下代码，在 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>

温馨提示：答案为网友推荐，仅供参考

当前网址：http://66.wendadaohang.com/zd/siis2vDivpDsDpvi9s.html

其他回答

第1个回答 2017-08-14

<!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>

相似回答

大家正在搜