【踩坑筆記】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>