如何检测元素checked状态？JS选中状态不更新问题修复

预期功能：根据前置复选框的checked选中状态，为后续对应元素添加不同样式类。
实际运行异常：

• 函数执行偶发返回undefined
• checked状态固定为true或false，点击切换元素选中状态时值不会更新

原问题代码：

function triggerLedDependency() {
    if (userSelection.led.mitLED.checked) {
        document.getElementById("ohneMotorWrapper").classList.add("disabled-option");

    } else {
        return document.getElementById("ohneMotorWrapper").classList.add("enabled-option");
    }
}

1. 状态取值来源错误：userSelection.led.mitLED是提前缓存的静态属性快照，不是DOM元素的实时状态，所以值不会随点击交互更新，永远是初始化时拿到的固定布尔值。
2. 样式类逻辑缺失：每次执行只追加新类，没有移除对立状态的旧类，会导致两个互斥样式类同时存在于元素上，引发样式冲突。
3. 分支逻辑不对称：if分支没有返回值，else分支返回classList.add()的执行结果——这个API本身返回值就是undefined，这就是返回值异常的来源。
4. 缺少事件绑定：大概率没有把该函数绑定到对应复选框的change事件上，切换选中状态时函数根本没有触发执行。

调整后的可运行代码如下：

function triggerLedDependency() {
    // 每次执行时实时获取DOM上复选框的最新选中状态，不要使用提前缓存的静态值
    // 注意把下面的ID替换成你页面中mitLED复选框的实际元素ID
    const ledCheckbox = document.getElementById("mitLED");
    const targetWrapper = document.getElementById("ohneMotorWrapper");
    const isChecked = ledCheckbox.checked;

    if (isChecked) {
        targetWrapper.classList.add("disabled-option");
        // 移除对立状态的类，避免类名共存导致样式冲突
        targetWrapper.classList.remove("enabled-option");
    } else {
        targetWrapper.classList.add("enabled-option");
        targetWrapper.classList.remove("disabled-option");
    }
}

// 绑定复选框状态变化事件，每次切换选中时自动执行逻辑
document.getElementById("mitLED").addEventListener("change", triggerLedDependency);
// 页面初始化完成后先执行一次，保证页面首次加载时样式就和选中状态匹配
triggerLedDependency();

• 操作复选框状态时，必须通过DOM元素实例的.checked属性获取实时值，不要用getAttribute("checked")，该方法只能拿到HTML上写死的初始属性值，不会随用户交互更新。
• 互斥状态的样式切换，必须保证同一时间元素上只存在对应状态的类名，否则会因为CSS优先级问题出现样式不符合预期的问题。
• 不需要给函数加多余的return逻辑，该函数只做DOM样式修改，不需要返回值。

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