layui復(fù)選框的全選與取消實(shí)現(xiàn)方法
更新時間:2019年09月02日 15:21:38 作者:木大大
今天小編就為大家分享一篇layui復(fù)選框的全選與取消實(shí)現(xiàn)方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
廢話不多說啦,直接貼上代碼吧!
<div class="layui-form-item layui-form-text"> <label class="layui-form-label"> <span class="x-red">*</span>權(quán)限表 </label> <div class="layui-input-block"> <table class="layui-table layui-input-block"> <tbody> <tr> <td> 客戶管理 <input class="checkbox_v1" type="checkbox" name="checkbox_v1" value="客戶管理" lay-filter="checkbox_v1"> </td> <td> <div class="layui-input-block"> <input name="checkbox1[]" type="checkbox" value="意向" class="checkbox1" lay-filter="checkbox1">意向 <input name="checkbox1[]" type="checkbox" value="會員" class="checkbox1" lay-filter="checkbox1">會員 </div> </td> </tr> <tr> <td> 施工管理 <input class="checkbox_v2" type="checkbox" name="checkbox_v2" value="施工管理" lay-filter="checkbox_v2"> </td> <td> <div class="layui-input-block"> <input type="checkbox" name="checkbox2[]" value="設(shè)計(jì)" class="checkbox2" lay-filter="checkbox2">設(shè)計(jì) <input type="checkbox" name="checkbox2[]" value="完工" class="checkbox2" lay-filter="checkbox2" >完工 <input type="checkbox" name="checkbox2[]" value="業(yè)主" class="checkbox2" lay-filter="checkbox2">業(yè)主 </div> </td> </tr> <tr> <td> 系統(tǒng)設(shè)置 <input class="checkbox_v3" type="checkbox" name="checkbox_v3" value="系統(tǒng)設(shè)置" lay-filter="checkbox_v3"> </td> <td> <div class="layui-input-block"> <input type="checkbox" name="checkbox3[]" value="個人資料" class="checkbox3" lay-filter="checkbox3" >個人 <input type="checkbox" name="checkbox3[]" value="BOSS" class="checkbox3" lay-filter="checkbox3" >BOSS </div> </td> </tr> </tbody> </table> </div> </div>
<script> layui.use([ 'layer', 'jquery', 'form'], function() { $ = layui.jquery; var form = layui.form ,layer = layui.layer; form.on('checkbox(checkbox_v1)', function(data){ var a = data.elem.checked; if(a == true){ $(".checkbox1").prop("checked", true); form.render('checkbox'); }else { $(".checkbox1").prop("checked", false); form.render('checkbox'); } }); form.on('checkbox(checkbox1)', function(data) { var b = data.elem.checked; if(b == true){ $(".checkbox_v1").prop("checked", true); form.render('checkbox'); }else { var item = $(".checkbox1"); var bool = false; for (var i = 0; i < item.length; i++) { if(item[i].checked == true){ bool = true; break; } } if(bool==false) { $(".checkbox_v1").prop("checked", false); form.render('checkbox'); } } }); form.on('checkbox(checkbox_v2)', function(data){ var a = data.elem.checked; if(a == true){ $(".checkbox2").prop("checked", true); form.render('checkbox'); }else { $(".checkbox2").prop("checked", false); form.render('checkbox'); } }); form.on('checkbox(checkbox2)', function(data) { var b = data.elem.checked; if(b == true){ $(".checkbox_v2").prop("checked", true); form.render('checkbox'); }else { var item = $(".checkbox2"); var bool = false; for (var i = 0; i < item.length; i++) { if(item[i].checked == true){ bool = true; break; } } if(bool==false) { $(".checkbox_v2").prop("checked", false); form.render('checkbox'); } } }); form.on('checkbox(checkbox_v3)', function(data){ var a = data.elem.checked; if(a == true){ $(".checkbox3").prop("checked", true); form.render('checkbox'); }else { $(".checkbox3").prop("checked", false); form.render('checkbox'); } }); form.on('checkbox(checkbox3)', function(data) { var b = data.elem.checked; if(b == true){ $(".checkbox_v3").prop("checked", true); form.render('checkbox'); }else { var item = $(".checkbox3"); var bool = false; for (var i = 0; i < item.length; i++) { if(item[i].checked == true){ bool = true; break; } } if(bool==false) { $(".checkbox_v3").prop("checked", false); form.render('checkbox'); } } }); </script>
以上這篇layui復(fù)選框的全選與取消實(shí)現(xiàn)方法就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
您可能感興趣的文章:
- 基于layui的table插件進(jìn)行復(fù)選框聯(lián)動功能的實(shí)現(xiàn)方法
- layui復(fù)選框限制選擇個數(shù)的方法
- layui-table表復(fù)選框勾選的所有行數(shù)據(jù)獲取的例子
- layui表格數(shù)據(jù)復(fù)選框回顯設(shè)置方法
- layui從數(shù)據(jù)庫中獲取復(fù)選框的值并默認(rèn)選中方法
- layui 監(jiān)聽表格復(fù)選框選中值的方法
- 解決Layui選擇全部,換頁checkbox復(fù)選框重新勾選的問題方法
- 解決layui 復(fù)選框等內(nèi)置控件不顯示的問題
- layui 數(shù)據(jù)表格復(fù)選框?qū)崿F(xiàn)單選功能的例子
相關(guān)文章
javascript實(shí)現(xiàn)五星評價代碼(源碼下載)
大家在淘寶購物之后,都會對賣家的服務(wù)進(jìn)行評論,那么五星評價代碼是怎么實(shí)現(xiàn)的呢?下面小編給大家介紹基于Javascript實(shí)現(xiàn)五星評價代碼,有需要的朋友可以參考下2015-08-08深入理解JavaScript 中的執(zhí)行上下文和執(zhí)行棧
這篇文章主要介紹了JavaScript 中的執(zhí)行上下文和執(zhí)行棧的相關(guān)知識,非常不錯,具有一定的參考借鑒價值,需要的朋友可以參考下2018-10-10關(guān)于IE瀏覽器以及Firefox下的javascript冒泡事件的響應(yīng)層級
原來是由于IE瀏覽器以及Firefox對于冒泡型事件的支持層次不同造成的。(如對冒泡事件不是很了解可先查詢相關(guān)資料)2010-10-10JavaScript使用類似break機(jī)制中斷forEach循環(huán)的方法
這篇文章主要介紹了JavaScript使用類似break機(jī)制中斷forEach循環(huán)的方法,需要的朋友可以參考下2018-11-11js+div實(shí)現(xiàn)文字滾動和圖片切換效果代碼
這篇文章主要介紹了js+div實(shí)現(xiàn)文字滾動和圖片切換效果代碼,涉及javascript鼠標(biāo)事件及頁面元素圖片滾動效果實(shí)現(xiàn)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-08-08