卡片式单选按钮必须将嵌套在内或用for显式绑定，确保点击卡片区域触发选中；原生radio不可见，由label承载视觉与交互，name属性须完全一致以实现互斥。
卡片式单选按钮的 HTML 结构怎么写才支持激活态
必须用 <input type="radio"> 套在 <label></label> 里，或者用 for 显式绑定 —— 否则点击卡片区域无法触发选中。原生 radio 本身不可见，靠 label 容器承载视觉表现和交互范围。
推荐结构（语义清晰、无障碍友好）：
<label class="card-radio"> <input type="radio" name="theme" value="dark" checked> <div class="card-content">暗色主题</div> </label>
- 不要把
input放在label外再用for，容易因 DOM 顺序或 ID 冲突导致点击失效 - 每个组的
name属性必须完全一致，否则无法互斥 - 避免给
input加display: none后忘记用visually-hidden替代，否则屏幕阅读器会跳过
如何用 CSS 实现“被选中时卡片高亮”
关键靠 :checked 伪类 + 相邻/子元素选择器。因为 input 在 label 内部，可以直接用 input:checked + .card-content 或 input:checked ~ .card-content（取决于结构），但更稳妥的是用 label 上的属性选择器：
.card-radio input:checked + .card-content {
border-color: #007bff;
box-shadow: 0 0 0 3px rgba(0,123,255,.25);
}- 别用
:checked直接样式化input—— 它默认不可见，且无法设置边框/阴影等卡片所需效果 - 如果卡片内容是多层嵌套，优先给
.card-content设固定padding和border-radius，避免激活态下尺寸跳变 - 注意 Safari 对
:checked + *的兼容性：确保input紧邻目标元素，中间不能有文本节点或注释
为什么 JS 监听 change 事件比 click 更可靠
用户可能用键盘（Tab + 空格/回车）操作，也可能通过辅助技术切换 —— 这些都不会触发 click，但一定会触发 change。只监听 click 会导致逻辑漏判。
立即学习“前端免费学习笔记（深入）”；
document.querySelectorAll('.card-radio input').forEach(radio => {
radio.addEventListener('change', e => {
console.log('选中值：', e.target.value);
});
});- 不要在
label上监听click并手动设置checked—— 这会破坏原生表单行为，比如按空格键选中后不触发change - 如果需要动态设置默认值，直接改
input.checked = true，然后手动 dispatchchange事件（仅当必要时） - 注意：
change在用户交互后才触发，不适合做实时校验；如需即时反馈，配合input的checked属性读取即可
移动端点击区域太小导致误操作怎么办
默认 input 的点击热区极小，必须扩展到整个卡片。CSS 中给 label 设 display: block 和足够内边距，同时确保 input 不阻断事件流：
.card-radio {
display: block;
padding: 16px;
cursor: pointer;
}
.card-radio input {
position: absolute;
opacity: 0;
pointer-events: none; /* 关键：让点击穿透到 label */
}- 别用
width: 0; height: 0隐藏input—— 某些安卓 WebView 会因此忽略其状态 - 如果卡片带图标或开关控件，确保图标的
pointer-events: none，否则点击图标区域可能不触发选中 - 在 iOS 上测试时，发现
label未设cursor: pointer时，长按会出现“放大镜”，影响体验
实际项目里最容易被忽略的是 pointer-events: none 和 change 事件监听的组合 —— 少一个，移动端或键盘操作就出问题。
