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'); //更新渲染
    });