layui checkbox 默认不支持开关样式，需用 lay-skin="switch" 配合 form.render('switch') 实现；若强依赖 checkbox 数组提交，则须隐藏原生 checkbox 并用 CSS 伪元素模拟开关，同时确保 label for 与 id 匹配。
layui checkbox 默认不支持开关样式，必须用 layui.form.render() 配合自定义 CSS
layui 原生的 checkbox 是传统方框样式，没有内置“开关（switch）”效果。官方 switch 组件是独立类型，和 checkbox 语义不同——它本质是带状态映射的 checkbox，但 DOM 结构、事件绑定、样式类都完全不同。想让普通 checkbox 看起来像开关，不能只改 class，必须覆盖渲染逻辑。
常见错误是直接给 input[type="checkbox"] 加 lay-skin="switch"：这会失效，因为该属性只对 input[type="checkbox"] 在 form.on('switch(...)') 场景下、且被 layui.form.render('checkbox') 处理过才生效——但它实际渲染的是 switch 专用结构，不是复选框。
- 真正可行路径：用
layui.form.render('switch')渲染一个switch，再通过 JS 同步其值到隐藏的checkbox（或直接用switch替代复选需求） - 若业务逻辑强依赖
checkbox的 name 数组提交（比如后端接收hobbies[]），就不能用多个switch，得手动模拟：保留原checkbox，用 CSS 隐藏它，再用伪元素画开关滑块 - 注意
layui 2.8+中switch默认不带文字，需显式加lay-text="ON|OFF"
用 layui.form.render('switch') 替代 checkbox 的最小实现
这是最稳妥、兼容性最好、且符合 layui 设计意图的做法。虽然 DOM 类型变了，但表单提交时仍走 checkbox 逻辑（switch 底层就是 checkbox）。
<input type="checkbox" name="enable" value="1" lay-skin="switch" lay-text="ON|OFF"> <input type="checkbox" name="debug" value="1" lay-skin="switch" lay-text="开|关">
然后在 JS 中调用：
layui.use('form', function(){
var form = layui.form;
form.render('switch'); // 必须显式渲染，否则只是原生 checkbox
});
关键点：
-
lay-skin="switch"必须写在input标签上，不能靠 JS 动态加 class 模拟 - 多个开关共用同一
name时，它们会互斥（变成 radio 行为），所以每个switch要有唯一name - 提交时，勾选的
switch会以name=value形式发送；未勾选的不会出现在 FormData 中（和原生checkbox一致）
保留 checkbox DOM 结构 + 自定义开关样式的硬核方案
当后端强要求字段名必须是数组形式（如 roles[]），且前端框架/校验器依赖真实 checkbox 元素时，只能走 CSS 覆盖。layui 不阻止你这么做，但要自己处理点击穿透和状态同步。
核心思路：隐藏原生 checkbox，用 label 包裹它，并利用 :checked + label::after 控制滑块位置。
<input type="checkbox" name="roles[]" value="admin" id="role-admin"> <label class="layui-form-switch-label" for="role-admin"></label>
配套 CSS（精简版，适配 layui 默认尺寸）：
#role-admin { display: none; }
.layui-form-switch-label {
position: relative; display: inline-block; width: 52px; height: 28px; background: #d2d2d2; border-radius: 14px; cursor: pointer;
}
#role-admin:checked + .layui-form-switch-label {
background: #5fb878;
}
.layui-form-switch-label::after {
content: ''; position: absolute; top: 2px; left: 2px; width: 24px; height: 24px; background: #fff; border-radius: 50%; transition: all .2s;
}
#role-admin:checked + .layui-form-switch-label::after {
left: 26px;
}
注意事项：
- 必须确保
label的for属性和checkbox的id严格匹配，否则点击无效 - 不要在该区域再绑定
form.on('checkbox(...)')，因为事件源仍是原checkbox，但视觉反馈已由 CSS 承担 - 移动端点击热区偏小，建议加
padding或扩大label尺寸，避免误操作
form.on 监听 switch 和 checkbox 的行为差异
很多人卡在这一步：写了 form.on('switch(enable)', ...) 却没触发，或者监听 checkbox 时拿不到开关状态。根本原因是事件类型和参数不同。
-
form.on('switch(filter)', callback)：只响应lay-skin="switch"元素，callback的elem是input，othis是包裹它的div.layui-form-switch，可通过elem.checked取当前状态 -
form.on('checkbox(filter)', callback)：只响应普通checkbox（不含lay-skin="switch"），即使你用 CSS 伪装成开关，它也按 checkbox 触发 - 如果混用两种写法，务必分开 filter 名，比如
switch-enable和checkbox-roles，否则监听会冲突
开关状态变更后，如果需要同步更新其他 DOM 或发送请求，推荐统一用 elem.checked 判断，而不是依赖 othis 的 class 切换——后者在快速连续点击时可能有延迟。
真正麻烦的不是怎么画出滑块，而是表单提交逻辑、校验规则、前后端约定是否允许把 switch 当 checkbox 用。很多线上问题其实出在后端没处理好未勾选时字段缺失的情况，而不是前端样式没做好。
