讲师中心 微信公众号
AI工具推荐 视频效率加速

layui单选框怎么根据数据库返回的值选中

雨枫君_5229

雨枫君_5229

发布时间:2026-08-23 13:21:45

|

849人浏览过

|

来源于php中文网

原创

Layui 表单控件默认不响应原生 checked 或 val() 赋值,必须通过数据驱动或渲染后干预:radio 需手动设 prop('checked', true) + form.render('radio');table radio 需 templet 判断字段值并输出 checked;select 的 value="0" 需先设 selected 属性再 render。

layui单选框怎么根据数据库返回的值选中

直接靠 checked 属性或 val() 赋值基本无效——Layui 会接管 DOM 并清掉原生状态,必须走它认可的数据驱动或渲染后干预路径。

表单内独立 radio 组:用 form.render('radio') + 手动设 checked

后端返回的是数字(如 gender: 1)或字符串(如 status: "active"),不能直接写 checked 在 HTML 里,因为 Layui 初始化时会抹掉这个属性。

  • 先确保 HTML 中每个 input[type="radio"] 都有明确的 namevalue,比如:<input type="radio" name="gender" value="1" title="男">
  • 拿到后端数据后,用 jQuery 定位匹配项并设 prop('checked', true)$('input[name="gender"][value="' + data.gender + '"]').prop('checked', true)
  • 必须紧接着调用 form.render('radio'),否则 UI 不同步;如果用了 lay-filter,建议传第二个参数:form.render('radio', 'myFormFilter')
  • 注意类型对齐:后端返回数字 0,但 DOM 中 value 是字符串 "0",比较前最好统一转成字符串或用严格相等 ===

Layui table 表格里的单选列:靠数据字段 + templet 渲染

表格里的 radio 不是普通表单控件,Layui 会自动管理 click 逻辑,但默认不响应数据里的 checked 字段——必须在列定义里用 templet 函数输出带状态的标签。

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

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

下载
  • 列配置必须含 type: 'radio',且整个 cols 中只能有一列是它
  • templet 函数里判断字段值,比如后端返回 is_default: 1,就写:(d.is_default === 1 ? ' checked' : '')
  • value 必须有且唯一,通常用 d.idd.row_id,别漏掉
  • 不要在原始数据里写 checked: true,Layui table 的 radio 模式不认这个字段;初始化默认选中只能靠提前塞 is_default: 1 进 data 数组

select 下拉框里 value="0" 选项无法默认选中

这不是 JS 没执行,而是 Layui 渲染时主动跳过了 value="0" 和空字符串的 option——它把 "0" 当成了 falsy 值过滤掉。

  • 不能只用 $('#sel').val(0),得先手动设置 selected 属性:$('#sel').find('option[value="0"]').prop('selected', true)
  • 再调 form.render('select') 触发重绘;如果 select 有 lay-filter,建议传第二个参数避免全局刷新
  • 确保 HTML 中 optionvalue 是带引号的字符串:<option value="0">未分类</option>,而不是 <option value=0>
  • 动态加载 option 时,必须等 append() 完成后再操作,否则 find('option[value="0"]') 找不到节点

真正卡住人的从来不是“怎么写代码”,而是 value="0"、数字 0、字符串 "0"、undefined、空字符串在 HTML 解析、jQuery 匹配、Layui 渲染三层里被当成不同东西处理——每一层都得对齐类型和存在性。

热门AI工具

更多
Seko
Seko Hot

一款AI视频创作工具,主要用于商汤科技推出的创编一体的AI短视频创作Agent,适合需要提升相关任务效率的用户。

音述AI
音述AI Hot

一款AI音频处理工具,主要用于音述AI是一个以“用声音述说故事”为核心的 AI 音乐创作与声音分享社区,适合需要提升相关任务效率的用户。

豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

超级简历WonderCV

一款AI办公效率工具,主要用于免费求职简历模版下载制作,应届生职场人必备简历制作神器,适合需要提升相关任务效率的用户。

WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

切问学术

切问学术是一款AI论文写作工具,复旦大学NLP团队推出的AI学术智能体。

Loomy
Loomy Hot

一款AI工具,主要用于科大讯飞发布的桌面级 AI 助理,比 OpenClaw 更易用、更安全!,适合需要提升相关任务效率的用户。

Lovart
Lovart Hot

一款面向视觉设计创作的AI设计平台,可通过智能体和画布工作流辅助制作海报、Logo、网页、PPT及其他视觉内容。

相关专题

更多
json数据格式
json数据格式

JSON是一种轻量级的数据交换格式。本专题为大家带来json数据格式相关文章,帮助大家解决问题。

1955

2023.08.07

json是什么
json是什么

JSON是一种轻量级的数据交换格式,具有简洁、易读、跨平台和语言的特点,JSON数据是通过键值对的方式进行组织,其中键是字符串,值可以是字符串、数值、布尔值、数组、对象或者null,在Web开发、数据交换和配置文件等方面得到广泛应用。本专题为大家提供json相关的文章、下载、课程内容,供大家免费下载体验。

2642

2023.08.23

jquery怎么操作json
jquery怎么操作json

操作的方法有:1、“$.parseJSON(jsonString)”2、“$.getJSON(url, data, success)”;3、“$.each(obj, callback)”;4、“$.ajax()”。更多jquery怎么操作json的详细内容,可以访问本专题下面的文章。

916

2023.10.13

go语言处理json数据方法
go语言处理json数据方法

本专题整合了go语言中处理json数据方法,阅读专题下面的文章了解更多详细内容。

2939

2025.09.10

ajax教程
ajax教程

php中文网为大家带来ajax教程合集,Ajax是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换,Ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。php中文网还为大家带来ajax的相关下载资源、相关课程以及相关文章等内容,供大家免费下载使用。

2300

2023.06.14

ajax中文乱码解决方法
ajax中文乱码解决方法

ajax中文乱码解决方法有设置请求头部的字符编码、在服务器端设置响应头部的字符编码和使用encodeURIComponent对中文进行编码。本专题为大家提供ajax中文乱码相关的文章、下载、课程内容,供大家免费下载体验。

340

2023.08.31

ajax传递中文乱码怎么办
ajax传递中文乱码怎么办

ajax传递中文乱码的解决办法:1、设置统一的编码方式;2、服务器端编码;3、客户端解码;4、设置HTTP响应头;5、使用JSON格式。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

2133

2023.11.15

ajax网站有哪些
ajax网站有哪些

使用ajax的网站有谷歌、维基百科、脸书、纽约时报、亚马逊、stackoverflow、twitter、hacker news、shopify和basecamp等。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

1121

2024.09.24

Buffalo框架数据库开发全教程
Buffalo框架数据库开发全教程

本专题围绕Buffalo框架数据库开发,讲解database.yml多环境配置、soda与fizz迁移生成回滚、模型结构体标签、增删改查与条件查询、一对多与多对多关联、数据校验、回调钩子、事务处理及原生SQL执行能力。

20

2026.09.23

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
基于TP6的门店排号系统
基于TP6的门店排号系统

共11课时 | 4.4万人学习

Layui 快速入门精讲
Layui 快速入门精讲

共5课时 | 1.6万人学习

ThinkPHP配置开发与CMS后台实战
ThinkPHP配置开发与CMS后台实战

共87课时 | 12.4万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn