如何获取Toggle Switch切换开关的状态并编写if/else判断逻辑

你创建的切换开关本质是绑定了id="myToggle"的复选框输入元素，开关的开闭状态直接对应该DOM元素的checked布尔属性：属性值为true表示开关开启，false表示开关关闭。

基础判断写法 #

你可以直接读取该属性值用于if/else分支判断，修正后的代码如下：

// 第一步：获取开关对应的DOM元素
const myToggle = document.getElementById('myToggle')

if (myToggle.checked) {
  // 开关开启时执行的逻辑写在这里
} else {
  // 开关关闭时执行的逻辑写在这里
}

实时监听开关切换写法 #

如果你需要在用户每次切换开关时自动触发对应逻辑，可以绑定change事件监听：

const myToggle = document.getElementById('myToggle')

// 监听开关状态变化事件
myToggle.addEventListener('change', () => {
  if (myToggle.checked) {
    console.log('开关已开启')
    // 开启状态对应逻辑
  } else {
    console.log('开关已关闭')
    // 关闭状态对应逻辑
  }
})

注意事项 #

• 不要使用== "True"这类字符串判断写法，checked是原生布尔类型，直接判断属性值即可，避免隐式类型转换导致的逻辑错误。
• 确保DOM元素加载完成后再执行JS逻辑，可以把JS代码放在body标签末尾，或者包裹在DOMContentLoaded事件回调中，避免出现获取元素为null的报错。

内容的提问来源于stack exchange，提问作者ANDERJ39