【踩坑筆記】layui之單選和複選框不顯示
阿新 • • 發佈:2020-08-21
直接上程式碼,下面前端頁面程式碼,使用layui框架:
<divclass="layui-form-item">
<divclass="layui-inline">
<labelclass="layui-form-label">性別</label>
<divclass="layui-input-block">
<inputtype="radio"id="sex-boy"name="sex"value="男"title="男"checked>
<inputtype="radio"id="sex-girl"name="sex"value ="女"title="女">
</div>
</div>
</div>
再來看js和css的引入,注意我這裡引入的js是layui.all.js(問題就在這):
<linkrel="stylesheet"href="${path}/static/layui/css/layui.css"media="all">
<linkrel="stylesheet"href="${path}/static/css/admin.css"media="all">
<scripttype="text/javascript"src="${path}/static/layui/layui.all.js" ></script>
然後執行看頁面: 該死,他怎麼又顯示出來了????? 好吧,我先說,之前的卻不顯示的,就那個radio那塊怎麼都不顯示,控制檯也沒報錯,接下來經過以下一頓搗鼓,現在正如你看到的,他居然顯示了。
修改上面引入的layui.all.js為layui.js:
<scripttype="text/javascript"src="${path}/static/layui/layui.js"></script>
在頁面結尾加入以下js程式碼塊:
<scripttype="text/javascript">
layui.use('form',function (){
constform=layui.form;
form.render();
});
</script>
這就重新整理資源,更新頁面就可以顯示了,然後你可以再把js改回去試試,說不定也可以了,amazing!!!
下面是根據後臺的sex值動態切換radio的checked,前端html程式碼不變:
<divclass="layui-form-item">
<divclass="layui-inline">
<labelclass="layui-form-label">性別</label>
<divclass="layui-input-block">
<inputtype="radio"id="sex-boy"name="sex"value="男"title="男"checked>
<inputtype="radio"id="sex-girl"name="sex"value="女"title="女">
</div>
</div>
</div>
<!--jscode-->
<scripttype="text/javascript">
layui.use('form',function(){
varform=layui.form,
$=layui.$;
constsex="${adm.sex}";//這裡是從後臺傳回來的值
if(sex==="女"){
console.log("sex=女");
$("#sex-boy").prop("checked",false);
$("#sex-girl").prop("checked",true);
}
form.render();
});
</script>