layui動態(tài)設置單選按鈕選中效果實例

更新時間：2023年06月02日 09:53:56 作者：developer?of?java

最近在使用layui前端框架,在使用單選按鈕、下拉菜單select、checkbox等控件的時候,往往遇到一些初始化的東西,下面這篇文章主要給大家介紹了關于layui動態(tài)設置單選按鈕選中效果的相關資料,需要的朋友可以參考下

很久沒用過layui框架了，最近在修改代碼時，遇到一個問題，就是怎么動態(tài)設置選中單選按鈕。需求是根據后臺返回的數據中的性別（0和1）設置動態(tài)選中性別單選按鈕。

效果圖如下：

前端頁面代碼如下：

<!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');
	});
});

看代碼好像沒有什么問題，但是實際運行卻不會選中，選擇器也正確獲取到了，這個問題找了很久，幾番周折，最后才發(fā)現原來是忘記了重新渲染表單，將以上代碼的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');

后面嘗試了很多次，發(fā)現以下幾種方法均可設置單選按鈕選中

$("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動態(tài)設置單選按鈕選中效果的文章就介紹到這了,更多相關layui動態(tài)設置單選按鈕選中內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: