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