ie8及以下完全不识别:checked伪类，必须用js模拟：监听change事件、同步is-checked类名，并手动处理radio互斥和初始化状态。
IE8及以下完全不识别:checked，必须用JS模拟状态
直接结论：IE8及更低版本压根不解析 :checked 伪类，CSS规则会被整个忽略。这不是写法问题，是浏览器引擎根本没实现。想让它生效，只能放弃纯CSS路径。
核心做法是监听 change 事件，手动同步一个类名（比如 is-checked），再把所有原CSS中的 :checked 替换成该类名。注意三点：
-
change事件必须绑定在input[type="checkbox"]和input[type="radio"]上，不能只绑label - 初始化时就得根据
el.checked属性补上初始类名，否则页面一加载就错乱 - 对
radio组，得手动清掉同name下其他项的is-checked类，否则互斥失效
IE9–10仅支持checkbox/radio，且label for联动常失效
IE9–10虽然能识别 :checked，但有两个硬伤：一是不支持 select 或 option 上的 :checked；二是 label[for] 点击后，经常不触发 input 的 change，尤其DOM动态插入时。
最稳的结构是把 input 直接包进 label 里，IE对这种写法的事件响应最可靠。如果必须用 for 关联，就加一层兜底：
- 确保
label的for值和input的id完全一致（大小写、空格、引号都不能错） - 在
label的click事件里手动调用input.click()，再触发change - 别用
[checked]属性选择器替代——它只反映HTML初始状态，JS改checked = true后它不会更新
CSS里所有:checked选择器都得重写
原CSS中像 input[type="checkbox"]:checked + label 这种写法，必须全部替换成 input[type="checkbox"].is-checked + label。漏改一处，IE里就有一处样式挂掉。
替换时还得留意权重问题：
- 如果原来用了高权重选择器（比如
#form input:checked），新类名可能压不住，得加!important或提升层级 - 别用通用兄弟选择器
~替代相邻兄弟+，容易误匹配其他label - 隐藏原生控件时，
display: none不影响:checked匹配，但要确保关联的可见元素（如label::before）能被新选择器捕获
radio组互斥逻辑容易漏掉
很多人只处理单个 checkbox 的切换，却忘了 radio 是“同 name 只能一个选中”。JS里一旦某个 radio 被勾选，必须立刻遍历同 name 的所有 radio，把其他项的 is-checked 类清除。
否则会出现多个 radio 都带 is-checked 类，样式全亮，语义错乱。这个逻辑不能靠CSS解决，必须代码控制：
- 监听的是
change，不是click——键盘空格键也能触发，click捕不到 - 遍历时要排除自己：
if (r !== el) r.classList.remove('is-checked') - 避免重复绑定：脚本若多次执行，同一个元素会绑多次
change，导致类名反复 toggle
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
