自定义复选框不切换

<input type="checkbox" id="myCheckbox">
<label for="myCheckbox">自定义复选框</label>

input[type="checkbox"] {
  display: none; /* 隐藏原生复选框 */
}

input[type="checkbox"] + label {
  display: inline-block;
  position: relative;
  padding-left: 25px; /* 自定义复选框的大小 */
  cursor: pointer;
}

input[type="checkbox"] + label:before {
  content: "";
  display: inline-block;
  width: 18px; /* 自定义复选框的大小 */
  height: 18px; /* 自定义复选框的大小 */
  border: 1px solid #aaa; /* 自定义复选框的边框 */
  border-radius: 3px; /* 自定义复选框的圆角 */
  background-color: #fff; /* 自定义复选框的背景色 */
  position: absolute;
  left: 0;
  top: 0;
}

input[type="checkbox"]:checked + label:before {
  background-color: #009688; /* 自定义选中状态下的背景色 */
}

input[type="checkbox"] + label:after {
  content: "✔"; /* 自定义选中状态的标记符号 */
  display: none;
  position: absolute;
  left: 4px;
  top: 1px;
  color: #fff; /* 自定义选中状态的标记符号颜色 */
}

input[type="checkbox"]:checked + label:after {
  display: inline-block;
}

var checkbox = document.getElementById("myCheckbox");
checkbox.addEventListener("click", function() {
  checkbox.checked = !checkbox.checked;
});