layui中的checkbox单/全选事件捕获

最新推荐文章于 2025-03-11 19:41:31 发布

吴沐珂

最新推荐文章于 2025-03-11 19:41:31 发布

阅读量9.2k

点赞数 2

本文链接：https://blog.youkuaiyun.com/whz199511/article/details/86715576

版权

LayUI随笔专栏收录该内容

5 篇文章

订阅专栏

这篇博客介绍了layui框架中处理checkbox单选和全选事件的方法，通过form.on和table.on进行捕获。内容强调了如何筛选特定条件的数据（如auditNode > 2）并获取勾选值。在表格数据中，作者建议将所需值放入数组并传递，以获取和处理id等信息。同时，指出避免属性重复，并推荐在checkbox中直接获取值传递给按钮事件，以简化复杂业务逻辑。全局标识的使用也被提及，对于多条件判断场景有很大帮助。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

layui中全选事件一般用form.on获取而单选一般用table.on来捕获

    //checkbox单选点击事件
    table.on('checkbox(table)',function(obj){ 
    	// 触发复选框后的回调函数
    	var child = $('.layui-table').find('tbody input[type="checkbox"]');
    	var tableData = layui.table.cache.searchID;
    	child.each(function(index, item){
    	  if(tableData[index].id == obj.data.id && tableData[index].auditNode <= 2){
    		  item.checked =false;
    		  obj.checked=false;
    	  }
        });
    	form.render('checkbox');
    });
    //checkbox全选事件捕获
    form.on('checkbox(layTableAllChoose)',function(data){
        var child = $('.layui-table').find('tbody input[type="checkbox"]');
        var tableData = layui.table.cache.searchID;
        child.each(function(index, item){
        	if(tableData[index].auditNode > 2){
        		item.checked = data.elem.checked;
        	}
        });
        form.render('checkbox');
    });

以上对勾选的数据进行了筛选，对符合auditNode > 2 的数据才进行勾选

那如何取到勾选数据的值呢，其实整个表单的值都已经取到了，值都在tableData中，定义一个数组，把自己需要的数据取到的值放入，然后传出去就可以了，我要id所以取的是id

    $('#abnormalMaintenance').on('click', function (dataArray) {
    	//捕获点击事件
    	var child = $('.layui-table').find('tbody input[type="checkbox"]');
		var tableData = layui.table.cache.searchID;
		var dataArray = [];
		child.each(function(index, item) {
			if(item.checked){
	            dataArray.push(tableData[index]);
	         }
		});
		var year = $("#year").val()
		if((dataArray.length != 0) && (queryMark) && (null != year)){
			var ids='';
			for(var i = 0; i < dataArray.length; i++){
				if(i != (dataArray.length - 1)){
					ids += dataArray[i].id + ",";
					}else{
						ids += dataArray[i].id;
						}
				}
			abnormalMaintenance(ids, year);
		}else{
			pubUtil.msg("请先选择学年进行查询，再勾选相应的教师数据后再执行此操作！",layer,2,function(){}, 3*1000);
			return;
		}
    });

很显然，上面关于child与tableData这两个属性写重复了，大家可以在checkbox里把所需要的值拿到直接传入按钮事件中，这样会更加简化。

对与判断较多的业务，可以定义一个全局标识，对与进入判断有很大的帮助；