深色模式切换Checkbox功能正常无动画，需实现旁侧文本Dark/Light同步切换

开发者阿泽

2026-9-29

问题根源

原JS使用querySelector仅能匹配第一个符合规则的开关，导致第二个开关未绑定事件、状态无法同步
移动端开关的<label>标签for属性值和对应input的id不匹配，点击label无法触发移动端开关的状态变化
缺少开关状态、文本同步更新的逻辑

修复方案

1. 修正HTML代码

将移动端开关的label的for属性修改为对应input的id值：

<div class="theme-switch-mobile-wrapper mobile__toggle">
     <!-- 把原来的for="checkbox"改成for="checkbox2" -->
     <label class="theme-switch-mobile" for="checkbox2">
        <input type="checkbox" id="checkbox2" />
        <div class="slider-mobile round-mobile"></div>
     </label>
        <p>DARK</p>
</div>

2. 替换全部JS代码为如下内容

// 选中所有开关
const toggleSwitches = document.querySelectorAll('.theme-switch input[type="checkbox"], .theme-switch-mobile input[type="checkbox"]');
// 选中两个开关旁的文本节点
const switchTexts = document.querySelectorAll('.theme-switch-wrapper p, .theme-switch-mobile-wrapper p');

// 同步所有开关状态和文本的公共函数
function syncSwitches(isDark) {
    // 更新所有开关的选中状态
    toggleSwitches.forEach(sw => sw.checked = isDark);
    // 更新所有开关旁的文本
    const text = isDark ? 'DARK' : 'LIGHT';
    switchTexts.forEach(el => el.textContent = text);
    // 存储主题到本地
    localStorage.setItem('theme', isDark ? 'dark' : 'light');
    // 全局设置主题属性
    document.documentElement.setAttribute('data-theme', isDark ? 'dark' : 'light');
}

// 给每个开关绑定变更事件
toggleSwitches.forEach(sw => {
    sw.addEventListener('change', (e) => {
        syncSwitches(e.target.checked);
    }, false);
})

// 初始化读取本地存储的主题
const currentTheme = localStorage.getItem('theme') || 'light';
syncSwitches(currentTheme === 'dark');