layui单选框radio如何设置默认选中

作者:袖梨 2026-08-22

Layui表格中radio列默认选中需在done回调中操作:先通过table.cache['filter']找到目标行,手动添加lay-checked="true"属性,再调用table.checkStatus('filter')刷新UI;表单radio则直接写checked属性并执行layui.form.render('radio')。

layui 表格里 radio 列怎么默认选中某行

表格里的 type: 'radio' 列不认 checked 属性,也不吃数据里的 is_checked: true 字段 —— 这是 Layui 的设计逻辑,不是你写错了。真正生效的方式只有在 done 回调里动手脚。

  1. 必须等 table.render() 完全执行完,table.cache 才有数据,否则查不到目标行
  2. 推荐用 table.cache['yourFilter'] 查到目标行对象后,手动加 lay-checked="true" 属性,再调 table.checkStatus('yourFilter') 强刷 UI(Layui 2.8+ 支持)
  3. 别用 setRowChecked('filter', {index: N}),因为翻页后 N 会变,且它只认当前页索引,跨页就失效
  4. 如果目标行 ID 是 123,就得遍历 table.cache['filter']id === 123 的那个对象,再操作,不能靠后端传个字段就完事

普通表单里的 layui radio 怎么设默认选中

这个场景简单得多:直接写 checked 属性就行,但得配 layui.form.render('radio') 才能同步样式。

  1. <input type="radio" name="sex" value="1" title="男" checked> —— HTML 层面写死,加载即生效
  2. 动态设置时用 $('input[name="sex"][value="2"]').prop('checked', true),然后立刻跟一句 layui.form.render('radio')
  3. name 必须一致,否则互斥失效;title 值会自动转成文字,不用额外加 label
  4. 如果 radio 是 AJAX 加载进来的,得等 DOM 插入后再调 form.render('radio'),否则样式不更新

监听 radio 选中事件时拿不到完整数据怎么办

table.on('radio(filter)', callback) 返回的 obj.data 只含列定义里声明的字段,没传的字段不会自动带进来 —— 这不是 bug,是性能优化策略。

  1. 想拿到原始数据全量字段(比如 create_timeremark),得去查 table.cache['filter'],用 obj.value(通常是 id)做 key 匹配
  2. obj.value 默认取 lay-id,但如果渲染时传了 id 字段,它会优先用这个,注意前后统一
  3. 分页状态下,obj.data 永远只反映当前页数据,跨页选中要自己缓存 ID 映射关系,Layui 不帮你维护
  4. 别依赖 table.checkStatus('filter').data[0],它在初始化默认选中时为空,且只返回当前页已选中的那一项(哪怕你手动 setRowChecked 过)

为什么写了 type: 'radio' 却点不动、事件不触发

最常见原因是配置漏项或冲突,不是 JS 报错那种明显问题,而是静默失效。

  1. 确保 cols 里只有一列 {type: 'radio'},混用 checkbox 或多列 radio 会导致事件绑定中断
  2. type: 'radio' 必须显式写在列定义里,不能靠改 type: 'checkbox' 名字蒙混过关
  3. 如果用了 fixed: 'left',这列得是第一个固定列,否则可能被遮挡,点击区域实际无效
  4. 监听事件必须用 table.on('radio(filter)', ...),写成 checkbox 或拼错 filter 名字,回调永远不会执行
默认选中这事,表格和表单是两套逻辑,表格靠 cache + 属性注入,表单靠 HTML 属性 + render 同步。容易混淆的点在于:都叫 radio,但底层接管方式完全不同,不能套用同一套思路。

相关文章

精彩推荐