layui复选框取消选中需先修改原生input的checked属性再调用form.render('checkbox')，因form.val()不支持checkbox多值状态，仅操作样式层无效，必须同步dom与ui。

layui复选框怎么用 JS 取消选中

直接调用 form.render() 不会生效，必须配合修改原始 input 的 checked 属性，再重新渲染表单。

取消单个复选框的选中状态

找到对应复选框的 input 元素，设 checked = false，再触发 form.render('checkbox')：

深蓝色网站后台管理系统layui框架模板-AdminPro

一款深蓝色网站后台管理系统layui框架模板

下载

• 确保复选框有唯一标识，比如 name + value，或加 id（推荐）
• 不要只改 layui 生成的 .layui-form-checkbox 样式层，那只是视觉效果
• 示例：

  document.getElementById('myCheckbox').checked = false;<br>layui.form.render('checkbox');

取消一组同 name 复选框的全部选中

遍历所有同 name 的 input[type="checkbox"]，逐个清除 checked 状态：

• 注意：layui 不提供类似 form.val('filter', {...}) 批量设置 checkbox 的 API，必须手动操作 DOM
• 别漏掉 form.render('checkbox')，否则 UI 不同步
• 示例：

  const boxes = document.querySelectorAll('input[name="interests"]:checked');<br>boxes.forEach(box => box.checked = false);<br>layui.form.render('checkbox');

为什么 form.val() 对复选框无效

form.val('filter', { ... }) 只支持 input、select、textarea，不处理 checkbox 和 radio 的多值状态。

• 它底层靠 name 匹配，但 checkbox 是数组型数据，form.val 没有解析逻辑
• 强行传 { interests: [] } 不会清空已选项，也不会报错，只是静默忽略
• 真正可靠的方式永远是：改原生 input.checked + form.render('checkbox')

layui 的 checkbox 渲染是“一次性增强”，后续状态变更必须回到原生 DOM 层操作，这点和 Vue/React 的响应式思维不同，容易卡在“以为 form.val 能管一切”上。