解決layui動態(tài)加載復選框無法選中的問題
更新時間：2019年09月20日 16:37:17 作者：禮拜八
今天小編就為大家分享一篇解決layui動態(tài)加載復選框無法選中的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
問題描述
1.最近用layui做后臺界面，遇到layui跟ajax數(shù)據(jù)動態(tài)加載的checkbox，偶爾不能正常勾選，取消
2.有分頁時，最后一頁數(shù)據(jù)過少會導致其他頁下方數(shù)據(jù)無法選中
3.頁面沒加載完或暴力測試時也會不能選中
利用layui更新渲染方法和網(wǎng)上的一些方法去解決后極大的減少了無法選中的情況，但是暴力測試時偶爾還會出現(xiàn)，實在不知道什么原因，所以就用了一個折中的方法——自己寫一個復選框
<!--原有l(wèi)ayui復選框-->
<td>
<div class="layui-unselect layui-form-checkbox" lay-skin="primary" data-id='2'><i class="layui-icon"></i></div>
</td>
<!--替換為自己寫的-->
<td>
<div a="off" class="checkBox" v-bind:data-id='x.Id' v-on:click="checkBox(i)">
<div></div>
</div>
</td>
自己寫的同樣支持vue綁定事件，并且支持單個選中、取消，全選和取消
//單個的選中取消
checkBox:function(n){
var checkbox = $('tbody tr').eq(n).find('.checkBox');
if (checkbox.attr("a") == "off") {
checkbox.children("div").css({
"display" : "block"
});
checkbox.attr("a","on");
}else {
checkbox.children("div").css({
"display" : "none"
});
checkbox.attr("a","off");
}
}
//全選取消
checkBoxAll:function(){
var obj = $('thead').find('.checkBox');
if ($(obj).attr("a") == "off") {
$('.checkBox div').css({"display" : "block"});
$('.checkBox').attr("a","on");
}else {
$('.checkBox div').css({"display" : "none"});
$('.checkBox').attr("a","off");
}
}
全選或者選中其中幾個，獲取對應id，刪除或進行其他操作
function getId() {
var obj = $("tbody .checkBox");
var arr='';
obj.each(function(index, el) {
if(obj.eq(index).attr("a") == "on"){
arr += obj.eq(index).attr('data-id')+ ','
}
});
return arr;
}
以上這篇解決layui動態(tài)加載復選框無法選中的問題就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
JavaScript訪問本地文件夾的幾種實現(xiàn)方法
由于安全限制無法直接訪問用戶的本地文件或文件夾,本文主要介紹了JavaScript訪問本地文件夾的幾種實現(xiàn)方法,具有一定的參考價值,感興趣的可以了解一下2024-06-06
這篇文章主要為大家詳細介紹了原生JS實現(xiàn)勻速圖片輪播動畫,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-10-10
echarts折線圖流動特效的實現(xiàn)全過程(非平滑曲線)
最近因為公司業(yè)務需求,需要實現(xiàn),當Echarts重新加載數(shù)據(jù)時實現(xiàn)動態(tài)效果,下面這篇文章主要給大家介紹了關于echarts折線圖流動特效實現(xiàn)的相關資料,需要的朋友可以參考下2023-03-03
js實現(xiàn)選項卡內(nèi)容切換以及折疊和展開效果【推薦】
本文主要介紹了js實現(xiàn)選項卡內(nèi)容切換以及文字折疊和展開效果的示例代碼。具有一定的參考價值，下面跟著小編一起來看下吧2017-01-01
這篇文章主要介紹了js中鍵盤事件,以一個較為簡單的實例形式分析了js響應鍵盤事件的操作技巧,需要的朋友可以參考下2015-01-01
下面小編就為大家?guī)硪黄獪\談幾種常用的JS類定義方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-06-06
這篇文章主要為大家詳細介紹了小程序?qū)崿F(xiàn)五星點評效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-11-11
這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)輪播圖標題跑馬燈，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-06-06
基于JavaScript實現(xiàn) 網(wǎng)頁切出 網(wǎng)站title變化代碼
這篇文章主要介紹了基于JavaScript實現(xiàn) 網(wǎng)頁切出 網(wǎng)站title變化代碼的相關資料,需要的朋友可以參考下2016-04-04
圖片旋轉(zhuǎn)、鼠標滾輪縮放、鏡像、切換圖片js代碼
這篇文章主要為大家介紹了圖片旋轉(zhuǎn)、鼠標滾輪縮放、鏡像、切換圖片js代碼，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-01-01