事件冒泡和JavaScript复选框出现问题

我正在尝试创建一个HTML表，在其最左边的列中带有复选框。我希望能够通过单击

元素上的任意位置来选择复选框。我已经让它工作了，但当我点击复选框时，它不会改变状态。我已经在Firefox54中测试过了（我不关心其他浏览器）

我已经做了一个JSFiddle来演示我的问题

let table=document.querySelector（“表”）；
表.addEventListener（“点击”，函数（e）{
e、 预防默认值（）；
设tr=e.target.closest（“tr”）；
复选框=tr.firstElementChild.firstElementChild；
//这不管用
checkbox.checked=！checkbox.checked
//这行得通，但我不喜欢
//setTimeout（函数（）{
//checkbox.checked=！checkbox.checked
// }, 100);
});

单击此处也可以工作
单击此处也可以工作
我可以单击文本/表格行，但单击复选框不再有效
您需要设置一个条件，以确保单击不是针对复选框：

if(e.target !== checkbox) {


let table=document.querySelector（“表”）；
表.addEventListener（“点击”，函数（e）{
设tr=e.target.closest（“tr”）；
复选框=tr.firstElementChild.firstElementChild；
如果（例如，目标！==复选框）{
checkbox.checked=！checkbox.checked
}
});

单击此处也可以工作
单击此处也可以工作
我可以单击文本/表格行，但是单击复选框不再有效
使用标签元素，那么您根本不需要任何脚本


表{边框折叠：折叠；}
td{border:1px solid#999999；}

我也在这里工作！
在这里工作三年！
检查单击的元素是否为复选框-请参阅请勿在其他地方发布代码。链接腐烂，请参阅..修复是
if（e.target！==checkbox）checkbox.checked=！复选框。在小提琴中选中
e.preventDefault（）
是不必要的。@RobG:我不知道如何嵌入代码段。我用你的回答来更新这个问题。@JaromandaX:你的解决方案不是很好移植。表中可能有其他输入不是复选框这不是我想要的。我的最小示例没有传达这一点，但我希望
中的任何单元格都可以切换复选框。然后在所有单元格中添加一个标签。；-）