layui动态设置单选按钮选中

这篇具有很好参考价值的文章主要介绍了layui动态设置单选按钮选中。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

 很久没用过layui框架了,最近在修改代码时,遇到一个问题,就是怎么动态设置选中单选按钮。需求是根据后台返回的数据中的性别(0和1)设置动态选中性别单选按钮。效果图如下:

layui动态设置单选按钮选中

前端页面代码如下:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>个人资料--layui后台管理</title>
		<link rel="stylesheet" href="/layui/css/layui.css" />
		<link rel="stylesheet" href="/css/user.css" />
	</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属性给表单全部元素赋值文章来源地址https://www.toymoban.com/news/detail-483350.html

$.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动态设置单选按钮选中的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Elementui按钮设置默认选中状态

    1. 按钮类型 elementui中按钮有默认按钮类型和 朴素按钮 类型。 2. 按钮属性 使用type、 plain属性 来定义 Button 的样式。 示例: 总结:所以只需要控制plain属性的值,就可以将按钮设置为选中状态。 3. 通过点击事件控制按钮状态 实现效果: 点击右侧按钮效果: 以vue为例示范:

    2024年02月16日
    浏览(43)
  • el-cascader 动态加载选项、编辑时数据回显问题 、单选不加载下一级节点、点击标签选中

    目录 需求描述 1.实现动态加载选项 2.数据回显 3.组件BUG:再次编辑不再加载 4.点击单选框选中节点时,同时加载下一级选项(额外需求) 5.点击label标签时,能够直接选中该节点(额外需求) 需求情景描述 前端使用el-cascader组件来实现一个层级选择器,可以支持单选或多选节

    2024年02月07日
    浏览(39)
  • IOS 设置UIButton按钮的选中状态样式

    设置按钮的边框 设置按钮的文字样式 设置按钮的背景颜色 设置按钮的文字内容 附上按钮的各种状态及交互

    2024年04月27日
    浏览(35)
  • Elementui Radio单选框取消选中

            最近开发一个后台项目的时候用到了单选框,而客户的要求是默认选择一个选项,然后 点击可以取消选中 。不想自己在手写一个Radio组件,只能在elementui的单选框上修改一下下啦。 .native的作用是在给组件添加修饰符时,将修饰符转为原生的按键修饰符。在使用组

    2024年02月02日
    浏览(57)
  • el-radio单选框,取消选中

    1.背景:在公司开发需求中有一个选择颜色的单选框(黑色,白色),每种颜色选择后均支持取消选中,可是el-radio标签不支持取消选中。 2.解决: 方法1:  方法2:换checkbox,设置max=1即可

    2024年02月14日
    浏览(50)
  • element中一个单选框radio时的选中和取消

    案例:  当我们只有一个单选框时,需要进行选中和取消的操作,但如果不经过处理,选中后就根本取消不了。 然后我试了一下加了点击事件,这里必须要加 native  ,触发原生事件   但发现打印台每次都触发两次  然后我又在网上找,有人说点击事件改成这样 @click.native

    2024年02月13日
    浏览(47)
  • element-ui 改变单选框,多选框的选中颜色

    @element-ui 改变单选框,多选框的颜色 注意 是写在less文件中,并在vue.config.js中配置

    2024年02月12日
    浏览(55)
  • LayUI Table 复选框 获取选中的数据

    方法2 统一收集

    2024年02月12日
    浏览(41)
  • Qt QRadioButton单选按钮控件

    Qt中的单选按钮类是 QRadioButton 它是一个可以切换选中( checked )或未选中( unchecked )状态的单选按钮 单选按钮常用在“多选一”的场景,也就是说,在一组单选按钮中,一次只能选中一个单选按钮 比如性别中的“男女”二选一,学历中的“博士/硕士/本科/其他”四选一,

    2024年02月03日
    浏览(49)
  • WPF 控件 (四、单选按钮)

    1. style 2.demo 3.效果 1. RadioButton2 2. Style 3. Demo 4.效果

    2024年02月20日
    浏览(36)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包