如何在LayUI中动态设置checkbox

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是什么

layui是一款采用自身模块规范编写的前端UI框架，它遵循原生HTML/CSS/JS的书写与组织形式，门槛极低，适合新手，并且它还提供了丰富的内置模块，他们皆可通过模块化的方式按需加载，从核心代码到API的每一处细节都经过精心雕琢，非常适合界面的快速开发，能够作为PC网页端后台系统与前台界面的速成开发方案。

看完上述内容，你们对如何在LayUI中动态设置checkbox有进一步的了解吗？如果还想了解更多知识或者相关内容，请关注创新互联行业资讯频道，感谢大家的支持。

分享至：

   

关于我们

公司简介 发展历程

服务项目

高端网站建设 小程序开发 APP开发 网络营销

建站知识

行业新闻 建站学堂 常见问题

联系我们

公司地址 人才招聘

成都



电话：028-86922220



地址：成都市太升南路288号锦天国际A幢1002号

版权所有：成都新网创想广告设计中心（普通合伙） 蜀ICP备11025516号-13