【无标题】layui中全选的实现_layui 全选-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_52714234/article/details/122328630

该博客介绍了如何在layui框架下实现表格的全选功能，并结合javascript和jquery技术进行批量删除操作，提供了完整的实现步骤。

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

layui的全选实现

  layui.use('jquery',function(){
        //当我们点击点击全选的时候,所有找到相应的div,然后使他们的选择状态变成selected
        //当再次点击的时候，就所有的都取消
        var $ = layui.$;
        //通过找到input找到div增加点击时间
        $('#selectAllBtn').next('div').click(function(){
         //   $('.uid').next('div').toggleClass('layui-from-checked');
         //然后找selectAllBtn有没有这个layui-from-checked 这个属性，如果有的话，给uid也赋值上这个属性

            var select_class = $('this').attr('class');
            if(select_class.indexOf('layui-from-chedked') ！--1){
                //说名选择了
                $('uid').next('div').addClass('layui-form-checked');
            }else{
                //说明没有选择
                $('uid').next('div').removeClass('layui-form-checked');
            }
        });
    });

layui进行批量删除

function deleteBatch(){
            layui.use('jquery',function (){
                var $ = layui.$;
                var length = $('.uid~div.layui-form-checked').length;
                if(length ==0){
                    alert("请选择要删除的记录");
                }else{
                    var flag = confirm('确认删除？');
                    if(flag){
                        //说明选择了
                        //获取选择的带有layui.form.checked的属性的value值
                        var inputs = $('.uid~div.layui-form-checked').prev();
                        var uids="";
                        inputs.each(function(i,e){
                            var uid = e.value;
                            uids+= uid+",";
                        });
                        location.href='<%=request.getContextPath()%>/user/deletes?uids='+uids;
                    }
                }

            });
        }