layui动态设置单选按钮选中效果实例
更新时间：2023年06月02日 09:53:56 作者：developer of java
最近在使用layui前端框架,在使用单选按钮、下拉菜单select、checkbox等控件的时候,往往遇到一些初始化的东西,下面这篇文章主要给大家介绍了关于layui动态设置单选按钮选中效果的相关资料,需要的朋友可以参考下
很久没用过layui框架了，最近在修改代码时，遇到一个问题，就是怎么动态设置选中单选按钮。需求是根据后台返回的数据中的性别（0和1）设置动态选中性别单选按钮。
效果图如下：
前端页面代码如下：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>个人资料--layui后台管理</title> <link rel="stylesheet" href="/layui/css/layui.css" rel="external nofollow" /> <link rel="stylesheet" href="/css/user.css" rel="external nofollow" /> </head> <body class="childrenBody"> <form class="layui-form" lay-filter="form"> <div class="user_left"> <div class="layui-form-item"> <label class="layui-form-label">用户名</label> <div class="layui-input-block"> <input class="layui-input layui-disabled username" name="username" disabled /> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">真实姓名</label> <div class="layui-input-block"> <input class="layui-input realName" lay-verify="required" name="name" /> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">性别</label> <div class="layui-input-block"> <input type="radio" name="gender" value="1" title="男" /> <input type="radio" name="gender" value="0" title="女" /> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">手机号码</label> <div class="layui-input-block"> <input type="tel" class="layui-input phone" lay-verify="required|phone" name="phone" /> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">出生年月</label> <div class="layui-input-block"> <input class="layui-input birthDate" lay-verify="required|date" name="birthDate" /> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">兴趣爱好</label> <div class="layui-input-block"> <input type="checkbox" name="like1[Java]" title="Java" /> <input type="checkbox" name="like1[C++]" title="C++" /> <input type="checkbox" name="like1[php]" title="PHP" /> <input type="checkbox" name="like1[javascript]" title="Javascript" /> <input type="checkbox" name="like1[jquery]" title="JQuery" /> <input type="checkbox" name="like1[html]" title="HTML5" /> <input type="checkbox" name="like1[css]" title="CSS3" /> <input type="checkbox" name="like1[VUE]" title="VUE" /> <input type="checkbox" name="like1[Layui]" title="Layui" /> <input type="checkbox" name="like1[EasyUI]" title="EasyUI" /> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">邮箱</label> <div class="layui-input-block"> <input class="layui-input email" lay-verify="required|email" name="email" /> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">自我评价</label> <div class="layui-input-block"> <textarea placeholder="请输入内容" class="layui-textarea"></textarea> </div> </div> </div> <div class="user_right"> <img class="layui-circle" title="更换头像" id="userFace" /> </div> <div class="layui-form-item" style="margin-left:5%;"> <div class="layui-input-block"> <a class="layui-btn" lay-submit="" lay-filter="save">立即提交</a> <button type="reset" class="layui-btn layui-btn-primary">重置</button> </div> </div> </form> <script src="/layui/layui.js"></script> <script src="/js/userInfo.js"></script> </body> </html>
后台接口/admin/getLogin返回的数据格式为
{
"code": 200,
"data": {
"id": 1,
"name": "超级管理员",
"gender": 0,
"username": "admin",
"password": "123456",
"roleId": "11111",
"head": "/admin/20220520004040.jpg",
"phone": "18888888888",
"email": "heyl_163_com@163.com",
"birthDate": "2022-09-11",
"unlockCode": "123456",
"lastLoginTime": "2022-10-15 03:13:09"
}
}userInfo.js文件的内容：
let $, form, $form;
layui.config({
base : "/js/"
}).use(['form', 'layer', 'laydate'],function(){
let layer = (parent.layer === undefined) ? layui.layer : parent.layer, laydate = layui.laydate, upload = layui.upload;
$ = layui.jquery;
form = layui.form;
$form = $('form');
laydate.render({
elem: '.birthDate'
});
$(".realName").attr("placeholder", "请输入真实姓名");
$(".phone").attr("placeholder", "请输入手机号码");
$(".birthDate").attr("placeholder", "请输入出生年月");
$(".email").attr("placeholder", "请输入邮箱");
upload.render({
elem: '#userFace',
url: '/admin/upload',
accept: 'file',
done: function(res, index, upload) {
$.get("/admin/getLogin", function(response) {
$("#userFace").attr("src", response.data.head);
layer.msg("头像修改成功");
}, 'json');
},
error: function(index, upload) {
//请求异常回调
}
});
$.get("/admin/getLogin", function(response) {
let result = response.data;
$(".email").val(result.email);
$(".phone").val(result.phone);
$(".realName").val(result.name);
$(".username").val(result.username);
$(".birthDate").val(result.birthDate);
$("#userFace").attr("src", result.head);
$("input:radio[value='" + result.gender +"']").prop("checked", true);
}, 'json');
// 提交个人资料
form.on('submit(save)', function() {
let index = layer.msg('提交中，请稍候',{
icon: 16,
shade: 0.8,
time: false
});
let data = form.val("form");
$.post("/admin/updateById", data, function(response) {
if(response.code === 200) {
setTimeout(function(){
layer.close(index);
layer.msg(response.message);
}, 2000);
} else {
layer.alert(response.message, {
icon: 2
});
}
}, 'json');
});
});看代码好像没有什么问题，但是实际运行却不会选中，选择器也正确获取到了，这个问题找了很久，几番周折，最后才发现原来是忘记了重新渲染表单，将以上代码的ajax请求部分修改为以下代码即可。
$.get("/admin/getLogin", function(response) {
let result = response.data;
$(".email").val(result.email);
$(".phone").val(result.phone);
$(".realName").val(result.name);
$(".username").val(result.username);
$(".birthDate").val(result.birthDate);
$("#userFace").attr("src", result.head);
$("input:radio[value='" + result.gender +"']").prop("checked", true);
form.render(); // 新增的的表单渲染代码
}, 'json');后面尝试了很多次，发现以下几种方法均可设置单选按钮选中
$("input:radio[value='" + result.gender +"']").prop("checked", true);
$("input:radio[value='" + result.gender +"']").attr("checked", true);
$("input:radio[value='" + result.gender +"']").prop("checked", "true");
$("input:radio[value='" + result.gender +"']").attr("checked", "true");
$("input:radio[value='" + result.gender +"']").prop("checked", "checked");
$("input:radio[value='" + result.gender +"']").attr("checked", "checked");此外，layui给我们提供了一个非常简单的方法来设置表单的值，可以通过表单元素的name属性给表单全部元素赋值
$.get("/admin/getLogin", function(response) {
let result = response.data;
form.val("form", {
"name": result.name,
"phone": result.phone,
"email": result.email,
"gender": result.gender,
"username": result.username,
"birthDate": result.birthDate
});
}, 'json');总结
到此这篇关于layui动态设置单选按钮选中效果的文章就介绍到这了,更多相关layui动态设置单选按钮选中内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
您可能感兴趣的文章:
相关文章
这篇文章主要介绍了浅谈JS中var,let和const的区别,let和const是ES6新增的关键字,详细的内容介绍，具有一定的参考价值，需要的朋友可以参考一下2022-07-07
最近，同事在做一个项目的时候，有个需求，需要一款动画库来支持2012-02-02
javascript中函数的特殊性与普通，对待函数可以像对待普通变量一样2008-05-05
因为使用 Cycle.js 的 Vite + TSX 所以想详细的探索 TSX 在 TS 配置中的编译情况,本文主要讲解 tsconfig 和 tsx 编译与配置,以常见的框架 PReact 的虚拟 DOM + TSX 组合、snabbdom + TSX 组合不同的配置以及编译输出2023-09-09
这篇文章主要介绍了js或jquery如何实现页面打印也可局部打印,需要的朋友可以参考下2014-03-03
JavaScript Window浏览器对象模型方法与属性汇总
本文给大家汇总分享的是JavaScript Window浏览器对象模型方法与属性，十分的细致全面，这里推荐给大家，有需要的小伙伴可以参考下。2015-04-04
这篇文章主要介绍了js判断在哪个浏览器打开项目的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-01-01
这篇文章主要介绍了JavaScript生成验证码并实现验证功能的相关资料,代码简单易懂，非常不错，具有参考借鉴价值，需要的朋友可以参考下2016-09-09
这篇文章主要为大家详细介绍了js实现贪吃蛇游戏含注释，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-03-03
在一些网页广告中提供的JS代码可以进行代码注入，然后监视各种元素，下面有个示例，大家可以参考下2014-04-04
最新评论