layui动态设置单选按钮选中
很久没用过layui框架了，最近在修改代码时，遇到一个问题，就是怎么动态设置选中单选按钮。需求是根据后台返回的数据中的性别（0和1）设置动态选中性别单选按钮。效果图如下：
前端页面代码如下：
个人资料--layui后台管理
后台接口/admin/getLogin返回的数据格式为
{
"code": 200,
"data": {
"id": 1,
"name": "超级管理员",
"gender": 0,
"username": "admin",
"password": "123456",
"roleId": "11111",
"head": "/admin/20220520004040.jpg",
"phone": "18888888888",
"email": "[email protected]",
"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');