layui從數(shù)據(jù)庫中獲取復(fù)選框的值并默認(rèn)選中方法
如下:
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="../../../static/js/css/layui.css" rel="external nofollow" media="all"> <link rel="stylesheet" type="text/css" href="../../../static/css/index-gb.css" rel="external nofollow" media="all"> <link rel="stylesheet" rel="external nofollow" /> <style> #node input[type=checkbox] { display: inline; } </style> </head> <body> <div class="div-con"> <form class="layui-form layui-form1"> <input type="hidden" name="roleid" id="id" value="#(role.roleid ??)"> <div class="layui-form-item form-item1"> <label class="layui-form-label form-label1">角色名稱</label> <div class="layui-input-block input-block1"> <input value="#(role.name)" type="text" name="name" autocomplete="off" placeholder="請(qǐng)輸入角色名稱" class="layui-input layui-input1"> </div> </div> <div class="layui-form-item form-item1"> <label class="layui-form-label form-label1">角色描述</label> <div class="layui-input-block input-block1"> <textarea value="#(role.description)" name="description" id="" cols="30" rows="10" class="layui-textarea textarea-me" placeholder="請(qǐng)輸入角色描述"></textarea> </div> </div> <div class="layui-form-item form-item1"> <label class="layui-form-label form-label1">菜單權(quán)限</label> <div class="layui-input-block input-block4"> <input type="checkbox" name="functional" lay-skin="primary" value="接待人員管理" title="接待人員管理"> <input type="checkbox" name="functional" lay-skin="primary" value="接待車輛管理" title="接待車輛管理"> <input type="checkbox" name="functional" lay-skin="primary" value="來訪信息錄入" title="來訪信息錄入"> <input type="checkbox" name="functional" lay-skin="primary" value="我的待辦" title="我的待辦"> <input type="checkbox" name="functional" lay-skin="primary" value="人員接待統(tǒng)計(jì)" title="人員接待統(tǒng)計(jì)"> <input type="checkbox" name="functional" lay-skin="primary" value="園區(qū)接待統(tǒng)計(jì)" title="園區(qū)接待統(tǒng)計(jì)"> <input type="checkbox" name="functional" lay-skin="primary" value="角色管理" title="角色管理"> <input type="checkbox" name="functional" lay-skin="primary" value="用戶管理" title="用戶管理"> <input type="checkbox" name="functional" lay-skin="primary" value="接待禮遇管理" title="接待禮遇管理"> <input type="checkbox" name="functional" lay-skin="primary" value="操作日志" title="操作日志"> <input type="checkbox" name="functional" lay-skin="primary" value="登錄日志" title="登錄日志"> </div> </div> <div class="layui-form-item form-item-btn"> <div class="layui-input-block layui-input-block5"> <button class="layui-btn" lay-submit lay-filter="form">提交</button> <button type="reset" class="layui-btn layui-btn-primary" id="reset">取消</button> </div> </div> </form> </div> </body> <script type="text/javascript" src="../../../static/js/layui.all.js" charset="utf-8"></script> <script type="text/javascript" src="../../../static/js/jquery-3.2.0.js" charset="utf-8"></script> <script type="text/javascript"> /** * 將從數(shù)據(jù)庫中獲取到的菜單權(quán)限以,分隔開,并默認(rèn)選中 */ layui.use('form', function() { var form = layui.form; var functional='#(role.functional)'; var groupCheckbox = $("input[name='functional']"); for (i = 0; i < groupCheckbox.length; i++) { var val =groupCheckbox[i].value; if(functional.split(',').indexOf(val)!=-1){ groupCheckbox[i].checked=true; } } form.render(); }); </script> </html>
layui.use('form', function(){ var form = layui.form; //監(jiān)聽提交 layui.code form.on('submit(form)', function(data){ //獲取復(fù)選框選中的值 var groupCheckbox=$("input[name='functional']"); var functional=""; for(i=0;i<groupCheckbox.length;i++){ if(groupCheckbox[i].checked){ var val =groupCheckbox[i].value; if(functional.length>0){ functional+=","+val; }else{ functional+=val; } } } data.field.functional=functional; $.post("/role/editOk",data.field,function(res){ if(res.code=="0"){ layer.msg(res.data); }else{ layer.msg(res.data); } }) return false; }); }); </script>
以上這篇layui從數(shù)據(jù)庫中獲取復(fù)選框的值并默認(rèn)選中方法就是小編分享給大家的全部內(nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript實(shí)現(xiàn)數(shù)組去重的7種方法
去重是開發(fā)中經(jīng)常會(huì)碰到的一個(gè)熱點(diǎn)問題,本文詳細(xì)的介紹了JavaScript實(shí)現(xiàn)數(shù)組去重的7種方法,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-03-03JavaScript使用Canvas繪制一個(gè)驗(yàn)證碼組件
驗(yàn)證碼,這一日常伴隨我們的要素,是我們?cè)诰€交互的重要安全保障,你的手機(jī)短信里是否被它占據(jù)半壁江山,今天我們就來聊聊如何在網(wǎng)頁上實(shí)現(xiàn)一個(gè)簡單的驗(yàn)證碼組件,需要的朋友可以參考下2023-09-09Boostrap基礎(chǔ)教程之JavaScript插件篇
Boostrap提供了12種JavaScript插件,在本文中給大家介紹了,不知道的朋友可以參考下,本文重點(diǎn)給大家介紹bootstrap基礎(chǔ)之js插件,感興趣的朋友一起學(xué)習(xí)吧2016-09-09javascript實(shí)現(xiàn)簡易計(jì)算器的代碼
下面小編就為大家?guī)硪黄猨avascript實(shí)現(xiàn)簡易計(jì)算器的代碼小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-05-05JavaScript使用前綴樹(trie樹)實(shí)現(xiàn)文本高亮
這篇文章主要為大家詳細(xì)介紹了JavaScript如何使用前綴樹(trie樹)實(shí)現(xiàn)文本高亮效果,文中的示例代碼講解詳細(xì),有需要的小伙伴可以參考下2024-04-04javascript DOM 操作基礎(chǔ)知識(shí)小結(jié)
經(jīng)常用到j(luò)avascript對(duì)dom,喜歡這方便的朋友也很多,要想更好的對(duì)dom進(jìn)行操作,這些基礎(chǔ)一定要知道的。2010-04-04利用JavaScript實(shí)現(xiàn)仿京東放大鏡效果
這篇文章主要為大家詳細(xì)介紹了如何利用JavaScript實(shí)現(xiàn)仿京東放大鏡特效,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-03-03js動(dòng)態(tài)添加input按鈕并給按鈕增加onclick的函數(shù)事件(帶參數(shù))完整實(shí)例
這篇文章主要介紹了js動(dòng)態(tài)添加input按鈕并給按鈕增加onclick的函數(shù)事件,結(jié)合完整實(shí)例形式分析了javascript頁面元素屬性動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2023-07-07基于javascript實(shí)現(xiàn)圖片切換效果
這篇文章主要介紹了基于javascript實(shí)現(xiàn)圖片切換效果的相關(guān)資料,需要的朋友可以參考下2016-04-04使用JavaScript實(shí)現(xiàn)旋轉(zhuǎn)的彩圈特效
這篇文章主要介紹了使用JavaScript實(shí)現(xiàn)旋轉(zhuǎn)的彩圈特效的相關(guān)資料,需要的朋友可以參考下2015-06-06