今天小編就爲大家分享一篇layui 動態設置checbox 選中狀態的例子,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
最近在使用layui前端框架,在使用單選按鈕、下拉菜單select、checkbox等控件的時候 往往遇到一些初始化的東西。
有時候會發現,自己動態append進去的代碼要不就是沒有顯示,要不就是初始化默認選中出問題。
以上這些情況進行了測試:
第一種情況:動態append()html代碼後沒有顯示空間的解決方案:
添加
layui.form.render();//重新渲染 可以解決多種沒有顯示的情況
第二種情況:動態設置默認選中狀態沒有效果解決方案:
細分爲兩種情況:
(1)在html頁面代碼下(沒有在layer初始化框架中,即沒有在layui.use([], function(){ }) 中進行初始化)
以初始化checkbox默認選中爲例:
$('.xxx').attr("checked", true); //注意這裏使用的是attr() layui.form.render(); //重新渲染顯示效果
(2)在layui.use(); 初始化中初始化一般這種情況會出現在調用api接口錯誤之後使用不然checkbox改變狀態
layui.use(['form','layer'],function(){ var form = layui.form layer = parent.layer === undefined ? layui.layer : top.layer, $ = layui.jquery; if ($('.xxxx').attr("checked") === "checked") { //判斷是否選中 $('.xxxx').prop("checked", true); //設置選中 注意這裏使用的是prop(), 這裏要是使用了attr()是無效的 } else { $('.xxxx').prop("checked", false); } form.render(); //重新渲染 });
以上這篇layui 動態設置checbox 選中狀態的例子就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支持神馬文庫。