layui 结合form,table实现全选,反选

怼烎@ 2022-05-22 13:41 331阅读 0赞

<div class="layui-form">
    <table class="layui-table">
        <thead>
            <tr>
                <td>
                    <input type="checkbox" name="" lay-skin="primary" lay-filter="allChoose">
                </td>
                <td>ID</td>
                <td>角色名</td>
                <td>唯一标识</td>
                <td>状态</td>
                <td>操作</td>
            </tr>
        </thead>
        <tbody class="role_list">
            <tr>
                <td>
                    <input type="checkbox" name="" lay-skin="primary" lay-filter="itemChoose">
                </td>
                <td>1</td>
                <td>xxx</td>
                <td>xxx</td>
                <td>xxx</td>
                <td>xxx</td>
            </tr>
        </tbody>
    </table>
    </div>

**js代码如下：**

layui.use(['form', 'layer'], function() {  //独立版的layer无需执行这一句
        var $ = layui.jquery, layer = layui.layer,form = layui.form; //独立版的layer无需执行这一句
        form.on('checkbox(allChoose)', function(data){ 
            var child = $(data.elem).parents('table').find('tbody input[type="checkbox"]');
            child.each(function(index, item){ 
                item.checked = data.elem.checked;
            });
            form.render('checkbox');
        });
    });

发表评论取消回复

表情：

评论列表（有 0 条评论，331人围观）

还没有评论，来说两句吧...

相关阅读

相关 JavaScript实现全选、反选功能（Vue全选、反选，js原生全选、反选）

首先为复选框添加了一个事件监听器，当用户点击该复选框时，将触发该事件；然后在事件处理函数中，通过遍历所有复选框，将它们的选中状态设置为与复选框相同的状态。

缺乏、安全感/ 2024年04月22日 22:30/ 0 赞/ 80 阅读

相关 jQuery实现全选反选功能

用jQuery实现全选反选功能要求要求1：点击全选的checkbox，让下面所有人名前的checkbox的选中状态和全选的一致要求2：点击反选按钮，所有人名

迷南。/ 2023年06月25日 06:05/ 0 赞/ 7 阅读

相关 jQuery实现全选、反选、全不选效果

jQuery实现全选、反选、全不选效果 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt

柔光的暖阳◎/ 2022年09月18日 05:00/ 0 赞/ 257 阅读

相关 jQurey全选，反选，不全选功能实现

html部分 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>全选，反选，不全选</t

╰+哭是因爲堅強的太久メ/ 2022年08月21日 10:53/ 0 赞/ 250 阅读

相关 jquery实现全选反选操作

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://w

梦里梦外;/ 2022年06月04日 09:13/ 0 赞/ 261 阅读

相关全选反选JavaScript实现

html代码 <label for="all">全选</label><input type="checkbox" id="all"> <div id="box

Myth丶恋晨/ 2022年05月27日 12:36/ 0 赞/ 238 阅读

相关 layui 结合form,table实现全选,反选

<div class="layui-form"> <table class="layui-table"> <thead>

怼烎@/ 2022年05月22日 13:41/ 0 赞/ 332 阅读

相关 javascript实现全选，反选功能

今天看项目发现有全选和反选的按钮实现，比较感兴趣，从网上搜索了自己实现了一下实现的方式就是在我们的按钮中设置响应的事件，然后在我们的函数中，通过定义的多选按钮的na

淡淡的烟草味﹌/ 2022年05月17日 10:48/ 0 赞/ 244 阅读

相关全选、反选

//全选 function selectall(_obj,_obj1,_objv,_objv1){ var fg = _obj1.value == _objv?

我就是我/ 2022年01月05日 06:11/ 0 赞/ 367 阅读

相关全选-反选-全不选

简单易懂，上手快 $(function() \{ //全选 $("\all").click(function()

绝地灬酷狼/ 2021年10月03日 02:48/ 0 赞/ 551 阅读