解决layui动态加载复选框无法选中的问题

问题描述

1.最近用layui做后台界面，遇到layui跟ajax数据动态加载的checkbox，偶尔不能正常勾选，取消

2.有分页时，最后一页数据过少会导致其他页下方数据无法选中

3.页面没加载完或暴力测试时也会不能选中

利用layui更新渲染方法和网上的一些方法去解决后极大的减少了无法选中的情况，但是暴力测试时偶尔还会出现，实在不知道什么原因，所以就用了一个折中的方法——自己写一个复选框

 <!--原有layui复选框-->
<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动态加载复选框无法选中的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • layui 监听表格复选框选中值的方法

    需要达到的目的: ajax()异步请求后台时,需要传入表格里复选框选中的id值 注意:在渲染form on 方法的done里面加入 done:function(res){ table_data=res.data; } 将复选框选中的值的id加入数组中,然后传递到后台作为ids参数 //自定义数组 var table_data=new Array(); var ids =new Array(); table.on('checkbox(push_port_table)', function(obj)

  • layui从数据库中获取复选框的值并默认选中方法

    如下: <!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=

  • layui默认选中table的CheckBox复选框方法

    方法一:如何根据条件判断是否默认选中table表格前面的复选框 table.render({ elem: '#userTable' , url: '../sysRole/getUserList' , title: '用户列表' , page: true //开启分页 , cols: [[ {type:'checkbox'} , {field: 'userName',sort: true, title: '用户名称'} , {field: 'account',sort: true, title:

  • 解决layui动态加载复选框无法选中的问题

    问题描述 1.最近用layui做后台界面,遇到layui跟ajax数据动态加载的checkbox,偶尔不能正常勾选,取消 2.有分页时,最后一页数据过少会导致其他页下方数据无法选中 3.页面没加载完或暴力测试时也会不能选中 利用layui更新渲染方法和网上的一些方法去解决后极大的减少了无法选中的情况,但是暴力测试时偶尔还会出现,实在不知道什么原因,所以就用了一个折中的方法--自己写一个复选框 <!--原有layui复选框--> <td> <div class="la

  • 解决layer 动态加载select 失效的问题

    问题: 现在select的一些插件都是隐藏掉原生select域,然后生成一个div框架来做样式和动态效果,但是这些组件在layer弹出层中都没有反应 解决办法: form.render('select');//局部渲染select 废话: 不知道有没有人入了layer的坑,关于它的动态加载select和单选复选框的.原来layer为了让样式更漂亮,所以它隐藏了原先的样式,自己动态生成了一个新的样式..所以通过异步得到的新节点添加完以后要form.render('节点名')..再局部渲染一下就好了

  • javascript动态添加checkbox复选框的方法

    本文实例为大家介绍了javascript如何动态添加checkbox复选框: 在实际应用中可能需要动态的添加复选框,下面就简单介绍一下如何实现此效果. 单纯的创建一个复选框是很容易的,代码如下: var oCheckbox=document.createElement("input"); oCheckbox.setAttribute("type","checkbox"); oCheckbox.setAttribute("id"

  • 动态获取复选框checkbox选中个数的jquery代码

    动态获取复选框checkbox选中个数的jquery代码

    今天碰到"jquery动态获取复选框checkbox选中的个数",首先看下面例子: 复制代码 代码如下: <input type="checkbox" checked="checked">python<br> <input type="checkbox" checked="checked">java<br> <input type="check

  • 解决bootstrap-select 动态加载数据不显示的问题

    如下所示: 在使用bootstrap-select 动态加载数据的时候,refresh和render方法是必须使用的,不然就必须使用jquery往li对象里面填充数据,因为在bootstrap-select 中界面显示数据是通过li对象显示的,而select对象只是用于填充数据的,所以不要搞混了 以上这篇解决bootstrap-select 动态加载数据不显示的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • layui动态加载多表头的实例

    效果 动态生成header 返回的header数据:格式为数组,因为是二级表头,所以是二元数组 后台动态拼接数组,返回数组后把两个数组push到一个空数组中就可以组成一个动态的多级表头 var header= []; var header1= [{field: 'merchantName', title: '商户名称', width: 140, rowspan: 2},{field: 'merchantSubName', title: '子商户名称', width: 140, rowspan:

  • 解决Vue动态加载本地图片问题

    最近遇到了个问题,用v-bind动态绑定img的src,图片加载不出来.控制台显示src是有获取到图片地址的,可是就是加载不出来. 最后才发现原因原来是浏览器中直接显示'./img/img1.png',也就是没有经过编译的步骤,直接将获取到的数据当作字符串显示. 解决方法: 1.在当前界面全局import图片地址 //使用import引入 import img1 from './img/img1.png' import img2 from './img/img2.png' export defa

  • bootstrap里bootstrap动态加载下拉框的实例讲解

    实例如下所示: //引入的包 <!-- bootstrap --> <link rel="stylesheet" type="text/css" href="map/plug-in/scripts/bootstrap/bootstrap.min.css" rel="external nofollow" /> <link rel="stylesheet" type="t

  • js判断复选框是否选中及选中个数的实现代码

    用js判断复选框是否选中及选中个数,以前经常有朋友提到复选框的选中问题,这段代码可以帮你解决这个问题,而且它还可以判断你选择了多少个复选框,多选则弹出提示 <HTML> <head> <title>判断复选框是否选中及选中个数</title> <SCRIPT LANGUAGE="JavaScript"> function countChoices(obj) { max = 2; box1 = obj.form.box1.che

随机推荐