如何在自定义切换开关上触发事件

<input type="checkbox" id="toggle-switch">
<label for="toggle-switch"></label>

input[type="checkbox"] {
  display: none;
}

label {
  display: inline-block;
  width: 60px;
  height: 30px;
  background-color: #ccc;
  border-radius: 15px;
  position: relative;
  cursor: pointer;
}

label::before {
  content: "";
  position: absolute;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background-color: #fff;
  top: 2px;
  left: 2px;
  transition: all 0.3s ease;
}

input[type="checkbox"]:checked + label {
  background-color: #4CAF50;
}

input[type="checkbox"]:checked + label::before {
  transform: translateX(30px);
}

var toggleSwitch = document.getElementById("toggle-switch");

toggleSwitch.addEventListener("change", function() {
  if (this.checked) {
    // 执行开关打开时的操作
    console.log("开关已打开");
  } else {
    // 执行开关关闭时的操作
    console.log("开关已关闭");
  }
});