87,987
社区成员
发帖
与我相关
我的任务
分享【重新请教一段代码的细节】JS点击checkbox传值到input（不是传“选项”）
之前请教了几位大哥，得到一段代码。
作用：点击多选框，可以将“选项”显示在input里面；就像“复选1,复选2”这样。
并且是能按照点击顺序显示。
如果我需要将“值”显示在input，比如“a1,a2”这样的话，应该怎么改咧……？
菜鸟试了几种写法，但是没有能成功。
请教一下吧
<!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>JS点击checkbox传值到input</title>
<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"/>
<script type="text/javascript">
function checkedfun() {
var p = document.getElementById("jsrtxt");
var str = this.parentNode.innerText + ";";
if (this.checked) {
p.value += str;
} else {
p.value = p.value.replace(str,"");
}
}
window.onload = function () {
var arr = document.querySelectorAll("input[name=aaa]");
for (var i = 0; i < arr.length; i++) {
arr[i].onclick = checkedfun;
}
}
</script>
</head>
<body>
<input type="text" id="jsrtxt" class="tip" />
<label><input type="checkbox" name="aaa" value="a1"/>复选1</label>
<label><input type="checkbox" name="aaa" value="a2"/>复选2</label>
<label><input type="checkbox" name="aaa" value="a3"/>复选3</label>
</body>
</html>作用：点击多选框，可以将“选项”显示在input里面；就像“复选1,复选2”这样。
并且是能按照点击顺序显示。
如果我需要将“值”显示在input，比如“a1,a2”这样的话，应该怎么改咧……？
菜鸟试了几种写法，但是没有能成功。
请教一下吧
...全文
请发表友善的回复…
发表回复
初心不变时过迁 2020-10-28
- 打赏
- 举报
有一个小技巧 推荐使用 火狐 或者谷歌浏览器 然后启动debugger （F12）
var p = document.getElementById("jsrtxt"); 这句下面加个debugger；
然后看看你这个P里面有啥属性值 然后你就知道怎么写了
var p = document.getElementById("jsrtxt"); 这句下面加个debugger；
然后看看你这个P里面有啥属性值 然后你就知道怎么写了
gqkmiss 2020-10-28
- 打赏
- 举报
这个获取的是 文本内容
var str = this.parentNode.innerText + ";";
你需要获取 value 值就行了
this.value 就可以了
qybao 2020-10-28
- 打赏
- 举报
把
var str=this.parantNode.innerText+”;”;
改成
var str=this.value+”;”;
就可以了
