layui的checkbox全选,反选,取消 只需要3行代码

效果：

HTML代码

<table class="layui-table" lay-skin="line">
                            <colgroup>
                                <col width="150">
                                <col>
                                <col width="50">
                            </colgroup>
                            <thead>
                                <tr>
                                    <th>导航名称</th>
                                    <th>权限分配</th>
                                    <th>全选</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>
                                        新闻资讯
                                    </td>
                                    <td>
                                        <input type="checkbox" lay-skin="primary" name="Button1[]" title="显示" value="Show" checked="">
                                        <input type="checkbox" lay-skin="primary" name="Button1[]" title="添加" value="Add">
                                        <input type="checkbox" lay-skin="primary" name="Button1[]" title="修改" value="Edit">
                                        <input type="checkbox" lay-skin="primary" name="Button1[]" title="删除" value="Delete">
                                    </td>
                                    <td>
                                        <input type="checkbox" name="checkAll" lay-filter="checkAll"  lay-skin="primary" title="全选" data-checkName="Button1[]">
                                    </td>
                                </tr>

                                 <tr>
                                    <td>
                                        产品
                                    </td>
                                    <td>
                                        <input type="checkbox" lay-skin="primary" name="Button2[]" title="显示" value="Show">
                                        <input type="checkbox" lay-skin="primary" name="Button2[]" title="添加" value="Add">
                                        <input type="checkbox" lay-skin="primary" name="Button2[]" title="修改" value="Edit">
                                        <input type="checkbox" lay-skin="primary" name="Button2[]" title="删除" value="Delete">
                                    </td>
                                    <td>
                                        <input type="checkbox" name="checkAll" lay-filter="checkAll"  lay-skin="primary" title="全选" data-checkName="Button2[]">
                                    </td>
                                </tr>

                            </tbody>
                        </table>

JS 代码

//监听 checkbox
form.on('checkbox(checkAll)', function (data) {
        //console.log(data.elem); //得到checkbox原始DOM对象
        //console.log(data.elem.checked); //是否被选中，true或者false
        //console.log(data.value); //复选框value值，也可以通过data.elem.value得到
        //console.log(data.othis); //得到美化后的DOM对象
        let name = data.elem.dataset["checkname"];
        let inputCheckList = $("input[name='" + name + "']"); //获取所有checkbox的name为变量name 
        for (var i = 0; i < inputCheckList.length; i++) {
            inputCheckList[i].checked = data.elem.checked; //把所有checkbox的checked设置为当前复选框的状态true或false
        }
        form.render('checkbox'); //更新渲染
    });