放官方文檔:
位置 頁面元素-表單;內置模塊-表單
屬性title可自定義文本
屬性disabled開啟禁用
設置value="xxx"可自定義值,否則選中時返回的就是默認的on
radio單選框被點擊時觸發,回調函數返回一個object參數,並攜帶兩個成員:
data.elem radio原始DOM對象
data.value 被點擊的radio的value值
官網文檔太簡潔了,以至於在實際碰到問題時,明明可以一個小時解決,最后卻要花費兩三個小時,其實說到底還是菜如狗罷了。
在layer渲染過type為radio的input后,會在原始input元素的后面追加一個div,div的內容如下:
<div class="layui-unselect layui-form-radio layui-form-radioed"> <i class="layui-anim layui-icon"></i> <div>input的title值</div> </div>
1.獲取所選中的單選框的對象和value值
一般情況下,input框有一個id,然后直接找到下一個元素就是當前展示出來的那個div對象了。
即:$("#inputId").next();
input框中添加lay-filter="xxx",即帶有lay-filter的input都在渲染范圍之內,根據filter的值來區分不同的單選框
var val = $("input[name='xxx']:checked").val()
val即是所選中的框的value值。可在頁面初始化時獲取,並在獲取后進行下一步操作。
2.控制多選框的點擊事件(事件監聽)
語法:
form.on('event(過濾器值)', callback);
form模塊在layui事件機制中注冊了專屬事件,所以當你使用layui.onevent(自定義模塊事件時,請勿占用form名。
form支持的事件有:select; checkbox; switch; radio; submit
默認監聽的是所有form模塊元素,但一般都不會這么干,所以這里需要用到filter過濾
其實這個事件監聽就相當於我們的點擊事件
form.on('select(test)', function(data){
console.log(data);
});
更新渲染:
頁面加載時,layer將該渲染的元素全部渲染一遍。但有時候數據是動態操作的,需要執行更新渲染才可以
form.render(type, filter)
type :可選。表單的type,如果不選擇,則對全部類型的表單刷新一次
可選擇的type值:
select 下拉選;
checkbox 多選框(含開關);
radio 單選框。例:
form.render('select');
filter :即class="layui-form" 所在元素的lay-filter=“”的值,說白了這個值就是相同的一個或多個input的lay-filter的值,由這個filter值來控制元素的渲染范圍
例:
form.render(null, 'test')或form.render('test') //重新渲染lay-filter值為test的所有元素的全部狀態(包含select、checkbox和radio) form.render('select', 'test1') //重新渲染lay-filter值為test1的所有元素的select狀態
注:一般在同一個元素上放置多種狀態的挺少的,起碼我還沒碰到過,所以一般一個元素只放一個狀態(即一種框)。等碰到了再回來補