应使用 radio 模拟单选开关：因 Layui 的 checkbox 不支持组内互斥，而 radio 天然单选且兼容 form.val()、校验与重置；通过隐藏同名 radio 并自定义 CSS 实现开关样式，需在 form.render() 前完成 DOM 与样式初始化。
layui checkbox 怎么改成单选开关样式
不能直接用 checkbox 实现“单选开关”效果——layui 的 checkbox 本质是多选控件，ui 和行为都按多选设计。真要达成类似 ios 开关那种“非此即彼”的交互，得绕开原生 checkbox 渲染逻辑，用 radio + 自定义皮肤模拟。
为什么不用 checkbox 而改用 radio
Layui 的 form.render('checkbox') 只识别 type="checkbox" 元素，并绑定多选逻辑；它不支持对同一组 checkbox 做互斥控制（即点一个关掉另一个），强行 JS 手动 toggle 会破坏表单同步、重置、校验等内置行为。
而 radio 天然单选，Layui 对 type="radio" 的渲染和事件管理完全正常，只需把两个 radio（如 value="true" / value="false"）视觉上做成开关样式即可。
- 避免监听
change后手动调form.val()同步值，防止表单状态错乱 - 提交时能被
form.val()正确采集，无需额外取值逻辑 - 配合
required或自定义校验规则时行为一致
如何用 radio 模拟开关并保持 layui 样式
核心是：用两个同名 radio，隐藏原生控件，用 CSS 把父容器伪造成开关滑块。Layui 不干预你自定义 UI，只要保留 name 和 value 就能正常工作。
示例结构：
<div class="layui-form-item">
<label class="layui-form-label">启用通知</label>
<div class="layui-input-block">
<input type="radio" name="notify" value="true" title="开" checked><input type="radio" name="notify" value="false" title="关">
</div>
</div>
然后加一点 CSS（不依赖 layui 内部类，避免冲突）：
- 给
.layui-input-block内的input[type="radio"]设display: none - 用
title属性生成伪元素或外层包裹标签来画滑块轨道和圆钮 - 监听
change时，根据e.target.value切换对应伪元素状态（比如加active类）
注意：不要用 form.on('radio(...)') 去监听，那只是 layui 提供的便捷事件代理；直接用原生 change 更稳，且不影响 form.val()。
容易踩的坑：样式覆盖与 form.render 时机
常见错误是把自定义开关写在 form.render() 之后，结果 layui 把你的 radio 又套了一层默认 UI（比如变成小圆点+文字），导致样式失效。
- 必须在
form.render()前完成 DOM 插入和初始样式设置 - 如果动态插入表单片段，记得调用
form.render('radio', 'your-filter')，而不是只传'radio' - 不要给
radio加lay-skin="switch"—— 这是 layui 为checkbox预留的开关皮肤，对radio无效，还可能引发渲染异常 - 移动端点击区域太小？给包裹容器加
padding，别只靠font-size放大文字
真正麻烦的不是画开关，而是让这个“假开关”在表单重载、校验失败重绘、layer 弹窗内嵌表单等场景下依然稳定响应。建议把初始化逻辑封装成函数，在每次 form.render() 后统一调用一次样式修复。
