如何通过Js实现点击一组复选框，动态添加1个input输入框，输入框中自动填充所选复选框的内容呢？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何通过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> 参考技术A <!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>
如何在UILable上添加点击事件
参考技术A 最近开始学习iOS开发，今天上来写第一个iOS笔记 昨天碰到一个需求，在UILable上添加点击事件，网上找了写资料，有人建议用透明的UIButton覆盖，有人建议写一个集成自UILable的类，扩展点击事件的实现。 最后发现没有这么麻烦，只要两步就可以实现。 第一步，将UILable的userInteractionEnabled值设置为YES，这样才能触发点击事件。 第二步，通过TapGestureRecognize注册事件，就算xib操作的连线，UIButton的addTarget，也可以称作为关联、建立联系等等。 代码如下： UITapGestureRecognizer*tapGesture=[[UITapGestureRecognizeralloc]initWihTarget:selfaction:@selector(onClickUILable)]; [myLableaddGestureRecognizer:tapGesture]; 代码中myLable为需要添加事件的UILable，onClickUILable为点击UILable后触发事件调用的方法。以上是关于如何通过Js实现点击一组复选框，动态添加1个input输入框，输入框中自动填充所选复选框的内容呢？的主要内容，如果未能解决你的问题，请参考以下文章