對(duì)layui中表單元素的使用詳解
首先不管是單選框還是復(fù)選框或者是下拉框，都要在你寫的標(biāo)簽外面套一層div或者是form標(biāo)簽，如：
<div class="layui-input-block"> <input type="radio" name="sex" value="0" title="男"> </div>，class屬性是固定寫法。
這樣寫好了以后，你如果是寫在靜態(tài)頁(yè)面，這樣式可以看見效果，如果寫在js里，這樣寫了還有一步得寫，那就是
var form = layui.form();
form.render("select"); //更新全部
這樣寫是外面套的是form標(biāo)簽，如果是div，就寫layui.div();即可。
對(duì)于下拉框的事件的使用，語(yǔ)法form.on('event(過濾器值)', callback);
也可寫成
var form=layui.form();
form.on('select(addywlb)', function(data){}),這里面的選中的值可以直接data.value;關(guān)于data里的數(shù)據(jù)結(jié)構(gòu)，感興趣可以console.log(data);打印出看看。獲取選中的其他的屬性值，和普通的用法一樣，$("#cxYearBegin option:selected").attr("year");對(duì)了，關(guān)于select()括號(hào)里的值是這樣來的 <select name="modules" lay-verify="required" lay-filter="cxYearBegin" lay-search="" id="cxYearBegin" >，根據(jù)這個(gè)lay-filter屬性來獲取。
如果是復(fù)選框的事件，就可以這樣寫
form.on('checkbox(filter)', function(data){});
如果是單選按鈕是這樣寫：
form.on('radio(filter)', function(data){});
如果是開關(guān)按鈕，事件是一樣的：
form.on('switch(filter)', function(data){});
其中括號(hào)里的值都是通過lay-filter這個(gè)屬性值來獲取。
以上這篇對(duì)layui中表單元素的使用詳解就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
下面小編就為大家分享一篇js原生方法被覆蓋,從新賦值原生的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-01-01
js中hasOwnProperty的屬性及實(shí)例用法詳解
在本篇文章里小編給大家整理的是一篇關(guān)于js中hasOwnProperty的屬性及實(shí)例用法詳解內(nèi)容，有需要的朋友們可以跟著學(xué)習(xí)下。2021-11-11
最近工作中element后臺(tái)管理使用Echarts圖表,在使用過程中也遇到了些問題,下面這篇文章主要給大家介紹了關(guān)于echart自適應(yīng)寬度的兩種方法,需要的朋友可以參考下2022-12-12
這篇文章主要介紹了JavaScript將取代AppleScript？AppleScript是OS X平臺(tái)的類似JavaScript的腳本語(yǔ)言,需要的朋友可以參考下2014-09-09
原生JS版和jquery版實(shí)現(xiàn)checkbox的全選/全不選/點(diǎn)選/行內(nèi)點(diǎn)選(Mr.Think)
腳本之家小編之前整理不少checkbox全選全不選這方便的文章，但看了這篇以后發(fā)現(xiàn)實(shí)現(xiàn)方法更好2016-10-10
限制文本框只能輸入數(shù)字||只能是數(shù)字和小數(shù)點(diǎn)||只能是整數(shù)和浮點(diǎn)數(shù)
這篇文章主要介紹了限制文本框只能輸入數(shù)字||只能是數(shù)字和小數(shù)點(diǎn)||只能是整數(shù)和浮點(diǎn)數(shù)的實(shí)例代碼，非常不錯(cuò)，也比較實(shí)用，需要的小伙伴一起看下吧2016-05-05
簡(jiǎn)單方法判斷JavaScript對(duì)象為null或者屬性為空
對(duì)已聲明但未初始化的和未聲明的變量執(zhí)行typeof，都返回undefined，null表示一個(gè)空對(duì)象指針，typeof操作會(huì)返回object2014-09-09
這篇文章主要介紹了webpack中的模式(mode)使用詳解，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02
《javascript設(shè)計(jì)模式》學(xué)習(xí)筆記三：Javascript面向?qū)ο蟪绦蛟O(shè)計(jì)單例模式原理與實(shí)現(xiàn)方法分析
這篇文章主要介紹了Javascript面向?qū)ο蟪绦蛟O(shè)計(jì)單例模式原理與實(shí)現(xiàn)方法,結(jié)合實(shí)例形式分析了《javascript設(shè)計(jì)模式》中Javascript面向?qū)ο髥卫Ｊ较嚓P(guān)概念、原理、用法及操作注意事項(xiàng),需要的朋友可以參考下2020-04-04