layui 表格点击行实现CheckBox的选中与取消

layui 表格点击行实现CheckBox的选中与取消

1、先引入layui相关的插件

2、在定义表格的地方 设置 lay-filter 属性

<table id="tableBigType" lay-filter="tableBigType" class="layui-hide"></table>

3、数据加载 (重点就在这里)

layui.use('table', function(){
        table = layui.table;
        table.render({
            elem: '#tableBigType'  //上面定义的id
            ,url:''   //数据的请求路径
            ,cols: [[
                {field:'checkbox', type:'checkbox',checked:'true', width:'10%'}
                ,{width:'20%',type:'numbers',title: '序号', sort: true}
                ,{field:'dishesBigNumber', width:'20%', title: '编号', sort: true}
                ,{field:'dishesBigName',width:'50%', title: '酒菜大类名称'}
            ]]
            ,page: true
        });
        	
            //监听行单击事件  给每一行数据绑定点击事件
            //row(tableBigType)  表格的id
            table.on('row(tableBigType)', function(obj){
                //获取checkbox  
                var checked = $($($(obj.tr[0].firstChild)[0].firstElementChild)[0].lastChild);
                //判断是否被选中
                if(checked[0].className == "layui-unselect layui-form-checkbox layui-form-checked") {
                	//设置为未选中的样式
                    checked.attr("class","layui-unselect layui-form-checkbox");
                } else {
                	//设置为选中的样式
                    checked.attr("class","layui-unselect layui-form-checkbox layui-form-checked");
                }
            });
    });

效果图:
在这里插入图片描述

  • 4
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
实现LayUI表格点击选中复选框的功能,可以通过以下步骤来实现: 1. 在表头中添一个全选的复选框,并为其设置一个ID。 2. 在每一的第一列中添一个复选框,并为其设置一个lay-skin属性为primary,例如“<input type="checkbox" name="" lay-skin="primary" class="check-box">”。 3. 给表格绑定一个点击事件,在点击事件中判断点击的元素是否为复选框或者全选的复选框,如果是,则执对应的操作。 4. 当点击某一时,获取该的复选框元素,并设置其选中状态为true。 下面是一个示例代码: ```html <table class="layui-table" id="myTable"> <thead> <tr> <th><input type="checkbox" name="" lay-skin="primary" id="checkAll"></th> <th>列1</th> <th>列2</th> <th>列3</th> </tr> </thead> <tbody> <tr> <td><input type="checkbox" name="" lay-skin="primary" class="check-box"></td> <td>1列1</td> <td>1列2</td> <td>1列3</td> </tr> <tr> <td><input type="checkbox" name="" lay-skin="primary" class="check-box"></td> <td>2列1</td> <td>2列2</td> <td>2列3</td> </tr> </tbody> </table> <script> // 全选复选框的点击事件 $('#checkAll').on('click', function() { if ($(this).is(':checked')) { $('.check-box').prop('checked', true); } else { $('.check-box').prop('checked', false); } }); // 点击事件 $('#myTable tbody tr').on('click', function() { // 判断是否为复选框或者全选复选框 if ($(event.target).is(':checkbox') || $(event.target).parent().is(':checkbox')) { return; } // 获取该的复选框元素 var checkBox = $(this).find('.check-box'); // 判断该复选框是否已选中 if (checkBox.is(':checked')) { checkBox.prop('checked', false); } else { checkBox.prop('checked', true); } }); </script> ``` 在这段代码中,我们首先给表头添一个ID为“checkAll”的全选复选框,然后在每一的第一列中添lay-skin属性为primary的复选框。接着,我们给全选复选框和每绑定点击事件,在事件中判断点击的元素是否为复选框或者全选复选框,然后执对应的操作。当点击某一时,我们获取该的复选框元素,并设置其选中状态。这样,就可以实现点击选中复选框的功能了。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值