【踩坑笔记】layui之单选和复选框不显示

直接上代码，下面前端页面代码，使用layui框架：

<div class="layui-form-item">  
    <div class="layui-inline">  
        <label class="layui-form-label">性别</label>  
        <div class="layui-input-block">  
            <input type="radio" id="sex-boy" name="sex" value="男" title="男" checked>  
            <input type="radio" id="sex-girl" name="sex" value="女" title="女">  
        </div>  
    </div>  
</div>  

再来看js和css的引入，注意我这里引入的js是layui.all.js（问题就在这）：

<link rel="stylesheet" href="${path}/static/layui/css/layui.css" media="all">  
<link rel="stylesheet" href="${path}/static/css/admin.css" media="all">  
<script type="text/javascript" src="${path}/static/layui/layui.all.js"></script> 

而后运行看页面： 该死，他怎么又显示出来了？？？？？ 好吧，我先说，以前的却不显示的，就那个radio那块怎么都不显示，控制台也没报错，接下来通过如下一顿捣鼓，如今正如你看到的，他竟然显示了。

---

修改上面引入的layui.all.js为layui.js：

<script type="text/javascript" src="${path}/static/layui/layui.js"></script>

在页面结尾加入如下js代码块：

<script type="text/javascript">  
    layui.use('form',function(){  
        const form = layui.form;  
        form.render();  
    });
</script>  

这就刷新资源，更新页面就能够显示了，而后你能够再把js改回去试试，说不定也能够了，amazing！！！

---

下面是根据后台的sex值动态切换radio的checked，前端html代码不变：

<div class="layui-form-item">  
    <div class="layui-inline">  
        <label class="layui-form-label">性别</label>  
        <div class="layui-input-block">  
            <input type="radio" id="sex-boy" name="sex" value="男" title="男" checked>  
            <input type="radio" id="sex-girl" name="sex" value="女" title="女">  
        </div>  
    </div>  
</div>  

<!-- js code -->
<script type="text/javascript">  
    layui.use('form',function () {  
        var form = layui.form,  
                $ = layui.$;  
        const sex = "${adm.sex}";  // 这里是从后台传回来的值
        if (sex === "女"){  
            console.log("sex=女");  
            $("#sex-boy").prop("checked",false);  
            $("#sex-girl").prop("checked",true);  
        }  
        form.render();  
    });  
</script>