Page batch operation, a key select all

When the front end of the frame using layUI, a batch operation may layui method.

html：

<div class="tab-bars">
    <a class="approve"  onclick="approveListProgram()">批量审核</a>
</div>
<div class="tab-content  layui-form">
    <table class="frog-table">
        <thead>
            <tr>
                <th style="width: 20px;"><input type="checkbox"
                    lay-skin="primary" class= "checkAllProgram1" 
                    Lay-filter = "checkboxProgram1"  /> </ TH > 
                < TH style = "width: 50px;" > ID </ TH > 
                < TH > ID </ TH > 
                < TH > check section </ TH > 
                < TH > inspection time </ TH > 
                < TH > inspector </ TH > 
                < TH > check content </th>
            </tr>
        </thead>
        <tbody>
            <c:forEach items="${list}" var="fpPlaceDetail" varStatus="status">
                <tr target="slt_uid" rel="${fpPlaceDetail.id}"
                    id="${fpPlaceDetail.id}">
                    <td><input type="checkbox" lay-skin="primary"
                        lay-filter="checkboxProgram1" /></td>
                    <td>${page.pageBeginCount + status.index + 1}    </td>
                    <td>${fpPlaceDetail.number}</td>
                    <td>${fpPlaceDetail.checkDepartment}</td>
                    <td>${fpPlaceDetail.checkDate}</td>
                    <td>${fpPlaceDetail.checkUser}</td>
                    <td>${fpPlaceDetail.checkContent}</td>
                </tr>
            </c:forEach>
        </tbody>
    </table>
</div>

Note that if a key to select all of layUI If I need to add layui-form property in the above second div tab, otherwise js monitor events in the checkbox will fail.

JavaScript：

form.on('checkbox(checkboxProgram1)', function(data) {
        debugger;
        if ($(data.elem).hasClass("checkAllProgram1")) {
            if (data.elem.checked) {
                $(data.elem).parents('table:first').find('tbody').find(
                        'input[type="checkbox"]').prop("checked", true);
            } else {
                $(data.elem).parents('table:first').find('tbody').find(
                        'input[type="checkbox"]').prop("checked", false);
            }
            form.render('checkbox');
        }
    });

function approveListProgram() {
        var ids = "";
        $('.frog-table', NavTab.getCurrentPanel()).find(
                'tbody input[type="checkbox"]').each(function() {
            if ($(this).prop("checked")) {
                var id = $(this).parents('tr:first').attr("rel");
                if (ids == "") {
                    ids = id;
                } else {
                    ids += "," + id;
                }
            }
        });
        if (ids == "") {
            Dialog.warn("未选中一条以上的数据");
            return;
        }
        
        $.get('${ctx}/fpPlaceDetail/preApprove/'+ids,function(rtn){
              layer.open({
              type: 1,
              skin: 'layui-layer-rim ', // a border 
              width and heightarea: [' 500px ',' 
              Content: RTN 
            }); 
          }); 
    }

form.on listening event for the checkbox, select all perform a key operation.

approveListProgram () for the audit operations: first obtaining all id selected, IDS spliced ​​into a string, and then back up a page request.