今天就跟大家聊聊有关如何在LayUI中动态设置checkbox,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。
成都创新互联公司拥有网站维护技术和项目管理团队,建立的售前、实施和售后服务体系,为客户提供定制化的成都网站制作、做网站、网站维护、遂宁托管服务器解决方案。为客户网站安全和日常运维提供整体管家式外包优质服务。我们的网站维护服务覆盖集团企业、上市公司、外企网站、商城系统网站开发、政府网站等各类型客户群体,为全球千余家企业提供全方位网站维护、服务器维护解决方案。
1.页面引入layui.js和layui.css
手机银行权限配置
新版手机银行权限动态配置
2.页面js中要进行layui模块的初始化
/** * layui的模块初始化 */ layui.use(['form', 'layer'], function () { var form = layui.form; form.on('select(type)', function (data) { $("#TransactionType2").val($("#TransactionType").val()); $("#RegisterType2").val($("#RegisterType").val()); info(); }) form.render(); //渲染页面 }) /** * 页面加载完成后执行 */ $(function () { //初始化 $("#TransactionType2").val($("#TransactionType").val()); $("#RegisterType2").val($("#RegisterType").val()); //查询 info(); }) //查询 function info() { var transactionType = $("#TransactionType").val(); var registerType = $("#RegisterType").val(); var data = { TransactionType: transactionType, RegisterType: registerType }; /** * 将所有的checkbox设置不选中 */ $(":checkbox").prop("checked", false); var index = layer.load(2); $.ajax({ type: 'post', url: 'info', data: data, success: function (res) { layer.close(index); if (res.code == 200) { /** * 最小版本号 */ $("#MinVersion").val(res.MinVersion); /** *支持的账户类型 * @type {string} */ var registerFlag = res.RegisterFlag + ""; var registerFlags = registerFlag.split(","); for (var i = 0; i < registerFlags.length; i++) { //选中checkbox $('[name="RegisterFlag"][value="' + registerFlags[i] + '"]').prop('checked', true); } /** * 支持的账户种类 * @type {string} */ var supportAcClass = res.SupportAcClass + ""; var supportAcClasses = supportAcClass.split(","); for (var i = 0; i < supportAcClasses.length; i++) { //选中checkbox $('[name="SupportAcClass"][value="' + supportAcClasses[i] + '"]').prop('checked', true); } // $("#NeedFaceCheck").find("option[value='"+res.NeedFaceCheck+"']").prop('selected',true); $("#NeedOtpCheck").val(res.NeedOtpCheck); $("#NeedFaceCheck").val(res.NeedFaceCheck); $("#NeedTrsPwdCheck").val(res.NeedTrsPwdCheck); $("#SecondAcIssuedFlag").val(res.SecondAcIssuedFlag); $("#FaceSimilarity").val(res.FaceSimilarity); $("#NeedFingerprintCheck").val(res.NeedFingerprintCheck); $("#OverLimitNeedFaceCheck").val(res.OverLimitNeedFaceCheck); $("#OverLimitNeedFingerprintCheck").val(res.OverLimitNeedFingerprintCheck); $("#NeedImageCheck").val(res.NeedImageCheck); $("#AllowSubstitution").val(res.AllowSubstitution); layui.use('form', function () { var form = layui.form; form.render('checkbox'); form.render('select'); }); } } }) } /** * 更新 */ function update() { layer.confirm(" 您确定要提交吗?", {icon: 3, title: '温馨提示'}, function () { var form = $("#updateForm"); var data = form.serialize(); var minVersion = $("#MinVersion").val(); var faceSimilarity = $("#FaceSimilarity").val(); var needImageCheck = $("#NeedImageCheck").val(); if (minVersion == '') { layer.alert("请输入支持的最低版本号"); return; } if (faceSimilarity == '') { layer.alert("请输入人脸识别相似度"); return; } if (needImageCheck == '') { layer.alert("请输入启用图形验证码的次数"); return; } var index = layer.load(2); $.ajax({ type: 'post', url: 'update', data: data, success: function (res) { layer.close(index); if (res.code == 200) { layer.alert("操作成功"); } else { layer.alert("操作失败"); } } }) }) }
注意:
for (var i = 0; i < registerFlags.length; i++) { //选中checkbox $('[name="RegisterFlag"][value="' + registerFlags[i] + '"]').prop('checked', true); 必须要用prop 不能用attr }
layui是一款采用自身模块规范编写的前端UI框架,它遵循原生HTML/CSS/JS的书写与组织形式,门槛极低,适合新手,并且它还提供了丰富的内置模块,他们皆可通过模块化的方式按需加载,从核心代码到API的每一处细节都经过精心雕琢,非常适合界面的快速开发,能够作为PC网页端后台系统与前台界面的速成开发方案。
看完上述内容,你们对如何在LayUI中动态设置checkbox有进一步的了解吗?如果还想了解更多知识或者相关内容,请关注创新互联行业资讯频道,感谢大家的支持。
售后响应及时
7×24小时客服热线数据备份
更安全、更高效、更稳定价格公道精准
项目经理精准报价不弄虚作假合作无风险
重合同讲信誉,无效全额退款