ie8及以下不支持:checked伪类，ie9–10仅支持checkbox/radio且label for联动失效；需用js监听change事件动态添加/移除.is-checked类，并替换css选择器为.is-checked，同时兼顾初始化状态与radio组互斥逻辑。
IE不支持:checked伪类怎么办
IE8及以下完全不识别:checked，IE9–10虽支持但仅限<input type="checkbox">和<input type="radio">，且无法在label上通过for属性联动触发样式（除非label包裹input）。纯CSS方案在这里直接失效。
用JS监听change事件切换class最可靠
核心思路是：放弃依赖伪类，改由JS捕获用户操作，手动给对应元素添加/移除类名。关键不是“模拟选中”，而是“同步状态”。
- 必须监听
change而非click——防止键盘空格触发时遗漏 - 对
radio组需清空同name下其他项的类名 - 初始化时要根据
checked属性补全初始类名，否则页面加载后样式错乱 - 避免重复绑定：多次执行脚本会导致同一事件叠加触发
function initCheckedClasses() {
document.querySelectorAll('input[type="checkbox"], input[type="radio"]').forEach(el => {
const updateClass = () => {
el.classList.toggle('is-checked', el.checked);
if (el.type === 'radio' && el.checked) {
document.querySelectorAll(`input[name="${el.name}"]`).forEach(r => {
if (r !== el) r.classList.remove('is-checked');
});
}
};
updateClass(); // 初始化
el.addEventListener('change', updateClass);
});
}
label点击穿透问题在IE里特别明显
IE下label点击for关联的input，有时不触发change事件（尤其动态插入的DOM）。这不是bug，是IE对事件冒泡和focus行为的特殊处理。
- 确保label的
for值与input的id严格一致（大小写、空格、引号都算） - 更稳妥的做法：把input包进label里，IE对这种结构的
change支持更稳定 - 如果必须用
for，在label的click事件里手动调用input.click()再触发change
别忘了CSS里把:checked规则替换成.is-checked
原来写的input[type="checkbox"]:checked + label这类选择器，全部得改成input[type="checkbox"].is-checked + label。漏改一处，IE里就有一处样式不生效。
- 注意选择器权重：如果原CSS用了
input:checked，新类名可能权重不够，加!important或提升层级 - 不要用
[checked]属性选择器替代——IE8支持该属性选择器，但它不会随JS修改checked属性而更新，只反映HTML初始状态 - 动画/过渡效果需同时作用于
.is-checked和:checked，否则现代浏览器和IE表现不一致
真正麻烦的不是加几行JS，而是所有依赖:checked的地方都要双轨维护：一套给现代浏览器走伪类，一套给IE走类名——漏掉任意一个交互点或样式分支，IE用户看到的就是断裂的UI。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
