js动态生成的checkbox取值和选中事件

Posted 2023-04-16

参考技术A <script type="text/javascript">
window.onload = function()
// 创建 input 元素
var checkbox = document.createElement("input");
checkbox.type = "checkbox";
checkbox.value = "123";

// 页面添加 checkbox
document.body.appendChild(checkbox);

// 点击
checkbox.onclick = function()
if(this.checked)
alert("选中");

else
alert("未选中");

alert("value: " + this.value);

;
</script>追问

var li=document.createElement("li");
li.appendChild(checkBox);
li.appendChild(document.createTextNode(item.name));
ul.appendChild(li);
ad.appendChild(ul);
　　checkbox是放在ul li里面进行排序的 现在不仅要取值，而且后台还要保存 需要怎么做
　　字太多了 所以只留下主要部分

追答

取值和保存建议你直接使用传统的 form 来 post

只要这些被创建的元素在 form 之内，post 的时候后台都可以取到。

本回答被提问者采纳

解决label 和checkbox点击事件触发两次问题

参考技术A 最近在做项目是遇到自定义checkbox多选需求，点击label时，触发了两次点击事件

看下图，神奇的事情发生了！！！竟然label没有选中的样式，还 把 “选中” 和 “删除” 都给我打印出来了，同时满足这两个矛盾的条件是不可能的，那到底是什么原因呢？

点击label的时候打印“选中”，label添加class selected，当事件冒泡到input时，已经满足条件$(this).hasClass("selected")，打印“删除”，删除class selected，由于这个时间很短，这就是为什么我点击label没有给它添加样式了

我们可以看到下图已经有选中的样式了