应使用js监听change事件手动切换label类名；因layui将input置于label内且无相邻label兄弟关系，:checked+label无效，:has()兼容性差，故js控制最稳妥。
checkbox 点击后 label 颜色不响应？先确认 dom 结构是否合法
Layui 的 checkbox 渲染后会包裹一层 label，但默认不会给 label 加 for 属性或绑定到真实 input。如果手写 HTML 时用了自定义结构（比如把 input 放在 label 外），Layui 的事件代理就可能失效，导致点击无反应、样式不更新。
- Layui 要求原始 HTML 中
input[type="checkbox"]必须是label的直接子元素，且不能有额外 wrapper - 如果用 JS 动态插入 checkbox，得等
form.render('checkbox')执行完再操作样式逻辑 - 直接写
<label><input type="checkbox">选项</label>是安全的；写成<label><span><input...></input...></span>选项</label>就容易断链
用 CSS 实现点击后 label 变色：依赖 :checked + 邻居选择器
Layui 渲染后会把原始 input 隐藏，并在它后面插入一个带图标的 i 元素，真正的 label 文本则保留在原位置。所以不能靠 input:checked + label（因为 label 不是紧邻兄弟），得用更稳的方式：
- 给每个 checkbox 包裹的
label加一个 class，比如layui-form-checkbox-label - 利用
input[type="checkbox"]:checked向上找父级label，但纯 CSS 无法向上选，所以必须改结构或加 JS - 更实际的做法：监听
checkbox的change事件，手动切label的 class
form.on('checkbox(filter-name)', function(data){
var $label = $(data.elem).closest('label');
if(data.elem.checked){
$label.addClass('checked-highlight');
} else {
$label.removeClass('checked-highlight');
}
});
注意：Layui 的 change 回调里 data.elem 是原始 input，不是渲染后的图标，所以 $(data.elem).closest('label') 是可靠的。
为什么直接写 :checked + label 不生效？Layui 的 DOM 插入顺序是关键
查看浏览器 Elements 面板会发现，Layui 把原始 input 留在最前，然后插入 i.layui-icon，最后才是文本节点。整个结构类似：
<label class="layui-form-checkbox"> <input type="checkbox" name="like" value="1"><i class="layui-icon"></i> 我喜欢 </label>
这意味着：
-
input:checked + i可以匹配图标，但input:checked + label永远不成立（label是父级，不是后续兄弟） -
label:has(input:checked)理论上可行，但 IE 和旧版 Chrome 不支持:has()，Layui 要兼容到 IE9，不能依赖 - 所以绕过 CSS 伪类，用 JS 控制 class 是目前最稳的路径
样式冲突和性能提醒：别在 label 上直接写 color 过渡
Layui 自带 .layui-form-checkbox[checked] 类来控制图标状态，如果你同时给 label 加 transition: color .2s，可能遇到：
- 切换太快时颜色闪一下再变，因为 JS 添加 class 和浏览器重绘有微小延迟
- 如果 label 里有子元素（如
span或图标），只设label { color: red }不会透传，得加label * { color: inherit } - 多个 checkbox 共享同一 form 实例时，别用全局 class 名（如
.active），建议带上业务前缀，比如.order-form-checked
事情说清了就结束
