layui列表 checkbox和radio不顯示

如果列表內容是動態生成的，需要生成后調用渲染方法進行渲染。

當你使用表單時，layui 會對 select、checkbox、radio 等原始元素隱藏，從而進行美化修飾處理。但這需要依賴於 form 組件，所以你必須加載 form，並且執行一個實例。

 

layui.use('form', function(){
  var form = layui.form; //只有執行了這一步，部分表單元素才會自動修飾成功
  
  //……
  
  //但是，如果你的HTML是動態生成的，自動渲染就會失效
  //因此你需要在相應的地方，執行下述方法來進行渲染
  form.render();
});     

更新渲染

 

 

 

有些時候，你的有些表單元素可能是動態插入的。這時 form 模塊 的自動化渲染是會對其失效的。雖然我們沒有雙向綁定機制（因為我們叫經典模塊化框架，偷笑.gif） 但沒有關系，你只需要執行 form.render(type, filter); 方法即可。

第一個參數：type，為表單的 type 類型，可選。默認對全部類型的表單進行一次更新。可局部刷新的 type 如下表：

 

參數（type）值	描述
select	刷新select選擇框渲染
checkbox	刷新checkbox復選框（含開關）渲染
radio	刷新radio單選框框渲染

 

 

form.render(); //更新全部
form.render('select'); //刷新select選擇框渲染
//……

第二個參數：filter，為 class="layui-form" 所在元素的 lay-filter="" 的值。你可以借助該參數，對表單完成局部更新。

【HTML】
<div class="layui-form" lay-filter="test1">
  …
</div>
 
<div class="layui-form" lay-filter="test2">
  …
</div>
      
【JavaScript】
form.render(null, 'test1'); //更新 lay-filter="test1" 所在容器內的全部表單狀態
form.render('select', 'test2'); //更新 lay-filter="test2" 所在容器內的全部 select 狀態
//……

 

預設元素屬性

事實上在使用表單時，你的一半精力可能會在元素本身上。所以我們把一些基礎屬性的配置恰恰安放在了標簽本身上。如：

<input type="text" lay-verify="email">
<input type="checkbox" checked lay-skin="switch" lay-filter="encrypt" title="是否加密">
<button lay-submit>提交</button>

上述的lay-verify、lay-skin、lay-filter、lay-submit神馬的都是我們所說的預設的元素屬性，他們可以使得一些交互操作交由form模塊內部、或者你來借助form提供的JS接口精確控制。目前我們可支持的屬性如下表所示：

 

文章中有具體的對表單的各種操作，比如：

事件監聽

表單賦值/取值

表單驗證

 

地址：https://www.layui.com/doc/modules/form.html#render

 

 ================================

賦值部分：

var form = layui.form, laydate = layui.laydate;
form.val("form_filter", data.Tuple.Item1);
          
form.render("select");
form.render("radio");
form.render("checkbox");