layer單選框 radio的問題總結


放官方文檔:

位置 頁面元素-表單;內置模塊-表單
屬性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狀態

注:一般在同一個元素上放置多種狀態的挺少的,起碼我還沒碰到過,所以一般一個元素只放一個狀態(即一種框)。等碰到了再回來補


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM