JS checkbox不能勾选怎么办？

在写一个谷歌插件，想在插件的页面上加一个checkbox。在点击之后不能显示勾选的状态，但是能获取到它的值变成checked了。

我是给 checkbox 元素加了一个addEventListener，用来获取它的状态

1.如果把 addEventListener 放在 DOMContentLoaded 事件里面，能获取到checkbox的值，但是 checkbox 不能勾选
2.如果放在后面（如图），checkbox 可以正常勾选，但是会报错找不到 checkbox 元素，因为在 html 文件里 js 文件先加载了
3.如果把 js 文件放到 前面，元素的后面，效果和 1 一样

【相关推荐】

• 这篇博客: 超实用多选框 checkbox 功能——全选、不选、反选等功能的数据驱动 JS 实现中的 了解需要实现的功能需求 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
  

  一图胜前言，我们来看下要实现的效果图，如下：

  

  如上图所示，我们可以看到，这是一整个的多选框，绑定在一个数据值上。

  首先，要实现的上面的蓝色的按钮的功能，对于整个区块都要实现 全选、不选、反选 等功能。这没什么好说的，基础功能而已。

  其次，要实现各个分组内多选框的 全选、不选、反选 等功能。在组内实现这些功能的时候，是不能影响到其他分组的选择数据的。这个功能貌似有点麻烦，但是我决定满足产品MM的需求~

  本文仅针对核心功能进行实现，不对UI层面或其他数据绑定内容进行讨论，毕竟那些都是基础的业务代码而已。

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^