关于Layui：checkbox的动态加载问题

问题描述

项目从后台传到前端了一个JSONArray的值，其结构是：

[“教学视频”,“单板”,“双板”,“入门”,“高级”,“中级”,"***",“锦标赛”,“比赛实况”,“宣传片”,“解说”,“精彩回放”,“新闻”,“vlog”,“北京”,“吉祥物”,“教学视频”,“游玩类型”,“滑雪等级”,“赛事转播”,“视频类型”,“类型”]

需要在前端使用layui对checkbox进行重新渲染，发现原有的方法全部失效，且无法通过layui进行渲染，layui会在控制台报错：不支持的checkbox。
并且需要按照分级对不同的checkbox做换行操作。

解决思路

在阅读了Layui的全部文档后并没有发现关于checkbox的动态加载。所以直接调用layui的form进行了重新渲染页面，完成了需求。

解决方法

js页面

// An highlighted block
var hkkk = document.getElementById("hkkk")
    //这里是你动态
roleHtml=""
role=""
role2=""
    $.post("../admin/getdrillbiaoqian",
        function(data,status) {
            data = JSON.parse(data);

            var m = 0;
            for (i = 0; i < data.length; i++) {
                if(data[i]=="000"){
                    m++;
                }
            }
            for(i=1;i<m+1;i++){
                role += '<div class="layui-input-block" id="ac'+i+'"></div>';
                role2 += '<div class="layui-input-block" id="bc'+i+'"></div>';
                $('#hkkk').html(role);
                $('#hkkkk').html(role2);
            }
            m=0;
            for (i = 0; i < data.length; i++) {
                if(data[i]=="000"){
                    m++;
                    roleHtml=""
                }else {
                    roleHtml += '<input type="checkbox" name="videoLable" title="' + data[i] + '" value="' + data[i] + '">';
                }
                $('#ac'+m+'').html(roleHtml);
                $('#bc'+m+'').html(roleHtml);
            }



            $("#form").find('#hkkk').html();
            layui.form.render('checkbox');
            $("#form").find('#hkkkk').html();
            layui.form.render('checkbox');
        }
    );





    // 最后重新加载一下就可以了
    layui.use('form', function(){
        var form = layui.form;
        //根据的type类型修改
        form.render('checkBox');
    });