layui复选框不显示样式

layui的复选框checkbox不显示样式，只是普通的小方框，这个问题的原因有几种，不过常见的情况一般为：

没有加载模块，也就是JS文件中没有 layui.use(['form'],function(){...没有from这个模块
没有刷新渲染，比如在弹出层里面使用，需要弹出后用form.render('checkbox');渲染复选框，或者直接用form.render();渲染所有元素。
结构错误，我的问题就是出在了这里，网上找了半天都不知道是啥问题！

先看看官方是怎么说的：

在一个容器中设定 class="layui-form" 来标识一个表单元素块，通过规范好的HTML结构及CSS类，来组装成各式各样的表单元素，并通过内置的 form模块 来完成各种交互。

依赖加载模块：form （请注意：如果不加载form模块，select、checkbox、radio等将无法显示，并且无法使用form相关功能）

大概的意思就是。。。好吧，像我这种菜鸟其实看不太懂，不过我知道想让一个元素正常渲染的最基本构造，步骤如下：

载入css文件：
载入JS文件：
构造一个form元素：
把元素写到from里面：，注意type="checkbox"和 lay-skin="switch"两个属性，是决定你的input到底是个什么东东的关键

*注意：载入的CSS/JS文件根据自己的实际情况填写下面直接上代码：

<!DOCTYPE html>
</html>
</head>
  </meta charset="utf-8">
  </title>layui</title>
  </meta name="renderer" content="webkit">
  </meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  </meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  </link rel="stylesheet" href="layui/css/layui.css"  media="all">
  </!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
</body>


</form class="layui-form" action="" lay-filter="example">
  </div class="layui-form-item">
    </label class="layui-form-label">选择框</label>
    </div class="layui-input-block">
      </select name="interest" lay-filter="aihao">
        </option value=""></option>
        </option value="0">写作</option>
        </option value="1">阅读</option>
        </option value="2">游戏</option>
        </option value="3">音乐</option>
        </option value="4">旅行</option>
      </select>
    </div>
  </div>
  
  </div class="layui-form-item">
    </label class="layui-form-label">复选框</label>
    </div class="layui-input-block">
      </input type="checkbox" name="like[write]" title="写作">
      </input type="checkbox" name="like[read]" title="阅读">
      </input type="checkbox" name="like[daze]" title="发呆">
    </div>
  </div>
  
  </div class="layui-form-item">
    </label class="layui-form-label">开关</label>
    </div class="layui-input-block">
      </input type="checkbox" name="close" lay-skin="switch" lay-text="ON|OFF">
    </div>
  </div>
  
  </div class="layui-form-item">
    </label class="layui-form-label">单选框</label>
    </div class="layui-input-block">
      </input type="radio" name="sex" value="男" title="男" checked="">
      </input type="radio" name="sex" value="女" title="女">
    </div>
  </div>

  </div class="layui-form-item">
    </div class="layui-input-block">
      </button class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>
    </div>
  </div>
</form>

          
</script src="layui/layui.js" charset="utf-8"></script>
</!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
</script>
layui.use(['form', 'layedit', 'laydate'], function(){
  var form = layui.form
  ,layer = layui.layer
  ,layedit = layui.layedit
  ,laydate = layui.laydate;
  
  //日期
  laydate.render({
    elem: '#date'
  });
  laydate.render({
    elem: '#date1'
  });
  
  //创建一个编辑器
  var editIndex = layedit.build('LAY_demo_editor');
 
  //自定义验证规则
  form.verify({
    title: function(value){
      if(value.length </ 5){
        return '标题至少得5个字符啊';
      }
    }
    ,pass: [/(.+){6,12}$/, '密码必须6到12位']
    ,content: function(value){
      layedit.sync(editIndex);
    }
  });
  
  //监听指定开关
  form.on('switch(switchTest)', function(data){
    layer.msg('开关checked：'+ (this.checked ? 'true' : 'false'), {
      offset: '6px'
    });
    layer.tips('温馨提示：请注意开关状态的文字可以随意定义，而不仅仅是ON|OFF', data.othis)
  });
  
  //监听提交
  form.on('submit(demo1)', function(data){
    layer.alert(JSON.stringify(data.field), {
      title: '最终的提交信息'
    })
    return false;
  });
 
  //表单初始赋值
  form.val('example', {
    "username": "贤心" // "name": "value"
    ,"password": "123456"
    ,"interest": 1
    ,"like[write]": true //复选框选中状态
    ,"close": true //开关状态
    ,"sex": "女"
    ,"desc": "我爱 layui"
  })
  
  
});
</script>

</body>
</html>