直接上代碼，下面前端頁面代碼，使用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>
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/238.html
標籤：Windows
上一篇：LNK善意利用