Layui checkbox 本身不支持 tag 样式，需手动实现：用 .layui-form-checkbox 为选择器自定义 CSS，覆盖选中态需 !important，确保容器可点击且同步调用 form.render('checkbox')。
layui checkbox 本身不支持 tag 样式，必须手动实现
Layui 的 lay-skin="primary" 只提供基础圆角复选框，没有内置的「标签式」（如带背景色、圆角边框、紧凑排列）样式。所谓“tag 形式”，比如 <span class="tag-checkbox"><input type="checkbox">选项</span> 这类视觉效果，Layui 不渲染也不管理——它只认标准 input[type="checkbox"] + lay-skin 组合，其余都是纯 CSS/HTML 自定义。
想让 checkbox 看起来像 tag，得绕过 layui 渲染逻辑
直接给 checkbox 加 lay-skin="primary" 后再套 div/span 包裹并加背景色，大概率失效：因为 layui 会把原生 input 隐藏，用伪元素 i 模拟勾选状态，你加的样式若没命中那个 i 或父容器，就白搭。
- 必须用
.layui-form-checkbox作为外层容器选择器来写 CSS，不能只盯input - 标签文字要和 checkbox 共享同一行内布局，推荐用
display: inline-flex或display: inline-block包裹整个.layui-form-checkbox - 颜色、圆角、间距全部靠自定义 CSS 控制，例如：
.tag-checkbox .layui-form-checkbox { margin-right: 8px; border-radius: 12px; padding: 2px 10px; background: #e6f7ff; border: 1px solid #91d5ff; } - 选中态颜色要覆盖
.layui-form-checked[lay-skin=primary] i，且必须加!important，否则被 layui 默认权重压住
点击区域变小或失灵？检查 DOM 结构和事件绑定
手动包裹后常见问题：点文字区域不触发 checkbox 切换，或者点 tag 边框没反应。这是因为 layui 的点击事件绑定在 .layui-form-checkbox 容器上，而你如果把容器缩得太小、或加了 pointer-events: none、或用绝对定位遮挡了它，就会失效。
- 确保
.layui-form-checkbox的width和height足够包裹内部i和文字，别设overflow: hidden - 不要给
label或文字加for属性去绑定 checkbox——layui 渲染后原生input已被隐藏，for失效 - 如果用了
form.render('checkbox')，它只重绘.layui-form-checkbox内部结构，不会帮你调整外层 tag 容器尺寸，这部分得自己 JS 补齐（比如动态计算文字宽度后设 min-width）
多选 tag 组合时，状态同步容易错乱
多个 tag checkbox 放一起，全选/反选逻辑若还用原生 item.checked = true，UI 能变，但 layui 的 form.render('checkbox') 若没及时调用，下一次点击可能读不到最新状态。
- 每次手动修改
checked后，必须立刻调用form.render('checkbox')，不能攒着批量调 - 监听事件仍要用
form.on('checkbox(filterName)')，别绑click到 tag 容器上——容器不是 layui 管理的 target - 如果 tag 中混入禁用项（
disabled），记得在 JS 里跳过它们：if (!item.disabled) item.checked = ...，否则会报错或 UI 异常
.layui-form-checkbox:hover i，你加了背景色后，hover 时背景色也要变，否则用户会觉得“点了但没反馈”。这个细节一漏，体验就断层。 
