直接改checkbox样式无效是因小程序平台限制，appearance和伪元素不支持；应改用view+text模拟，并全局样式覆盖、避免scoped。
uni-app里直接改checkbox样式为什么无效？
因为小程序平台（微信/支付宝/字节）对原生checkbox组件的样式控制极其有限，appearance: none在多数小程序环境里被忽略，::before/::after伪元素也不被支持。H5端虽能用CSS重置，但一旦编译到小程序，就退回默认样式——这不是你写错了，是平台限制。
真正有效的做法是「放弃原生checkbox」，用view + text或image模拟勾选状态，再通过v-model或@click手动维护选中逻辑。
- 不要在
style标签里加scoped——否则样式无法穿透到checkbox内部，尤其在app.vue或uni.scss中全局覆盖时必须无作用域 - 避免在页面级
<style>中写过于宽泛的选择器（如checkbox），容易污染其他页面；推荐用带命名空间的类名，比如.my-checkbox - 微信小程序里
checkbox的checked状态变更可能触发两次@change，需在事件处理里做简单去重（比如记录上一次e.detail.value）
怎么用view+text实现跨端一致的圆形复选框？
核心思路：用一个view作为容器，里面放一个text显示✓（或用image加载自定义图标），再通过class切换背景色和边框。
<view class="my-checkbox" :class="{ 'checked': item.checked }" @click="toggle(item)">
<text class="check-icon">✓</text>
</view>
对应CSS（放在uni.scss或app.vue的<style>里）：
.my-checkbox {
width: 48rpx;
height: 48rpx;
border: 2rpx solid #999;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s;
}
.my-checkbox.checked {
background-color: #1890ff;
border-color: #1890ff;
}
.check-icon {
font-size: 32rpx;
color: #fff;
line-height: 1;
}
- 用
rpx单位保证多端缩放一致性，别用px或rem -
line-height: 1防止✓文字上下偏移；若用图标字体（如iconfont），注意小程序不支持@font-face远程字体，得转成base64或用图片 - 点击区域要够大——移动端最小触控面积建议≥40rpx×40rpx，所以外层
view尺寸不能太小
uni-data-checkbox能直接改样式吗？要注意什么？
可以，但必须绕过组件封装的样式隔离机制。uni-data-checkbox本质是基于原生checkbox的封装，其内部结构在不同平台下不一致（H5用input[type=checkbox]，小程序用checkbox标签），所以直接写.uni-data-checkbox checkbox选择器在小程序里大概率失效。
正确做法是利用它暴露的类名（如.checkbox__inner）进行强覆盖，并确保样式生效位置：
- 样式必须写在
app.vue的<style>里，或uni.scss中，不能写在页面级<style scoped> - 使用
!important提高权重（虽然不优雅，但在小程序里常是唯一解） - 微信小程序中
.checkbox__inner实际渲染为checkbox标签，所以border-radius等属性仍受限；支付宝/字节系稍宽松，但也不支持appearance - 如果用了
localdata，禁用项要靠数据里的disable字段控制，不是给组件加disabled属性
全选/反选逻辑怎么和自定义Checkbox联动？
关键不在UI，而在数据结构设计。如果你用的是数组v-model绑定，比如value: ['id1', 'id2']，那么全选就是把所有选项value塞进去，反选就是过滤掉已存在的。
但更稳妥的做法是维护一个独立的checkedMap对象（{ id1: true, id2: false }），这样能精准控制每个项的状态，避免数组操作引发的索引错乱或重复项问题。
- 全选按钮点击时，遍历
list，对每个item.id设checkedMap[item.id] = true，然后触发$forceUpdate()或用Vue.set确保响应式生效 - 监听任意子项变化时，要同步计算
indeterminate（半选）状态：当checkedCount > 0 && checkedCount < list.length时，全选框显示“—” - 小程序里
watch监听checkedMap变化可能有延迟，建议用nextTick或setTimeout微任务确保DOM更新完成后再读取状态
跨端适配最麻烦的从来不是样式，而是状态同步时机和平台对事件冒泡、change触发时机的细微差异。哪怕看起来一样，微信和支付宝对同一个checkbox-group的@change回调顺序都可能不同——所以别依赖“自然顺序”，自己存、自己算、自己更新。
