Jquery 数据表复选框

Question

我正在使用带有两个复选框列的 jquery 数据表，表标题中的每一列都有一个复选框。 我正在为复选框上的每个更改事件遍历数据表中的所有复选框，以确保选中/取消选中 checkAll 复选框，这会导致用户选中复选框时出现延迟。

下面是代码片段。 请让我知道是否还有其他方法可以提高性能。

ntfcTable.$('.ntfcInd')
            .change(
                    function() {
                        let counterNtfcCh = 0;
                        for (let i = 0; i < ntfcTableNodes.length; i++) {
                            if (ntfcTable.$('input[type="checkbox"][id="ntfcInd[' + i + ']"]').is(":checked") === true) {
                                counterNtfcCh++;
                            }
                        }
                        counterNtfcCh === ntfcTableNodes.length ? ntfcCheckAll.prop("checked", true)
                                : ntfcCheckAll.prop("checked", false);
                        checkBoxState = true;
                    });

Answer 1

希望这会有所帮助。 我假设 ntfcTable 是一个 jQuery 对象。 您不需要在每次遍历表时都搜索 ntfcTable。 第一行将抓取表格中的所有复选框。 jQuery 对象具有 length 属性，因此它们实际上可以循环使用。 只要您没有动态添加和删除复选框，这应该有效。

var ntfcTableNodes = ntfcTable.$('input[type="checkbox"]');
ntfcTableNodes.change(
                    function() {
                        let counterNtfcCh = 0;

                        for (let i = 0; i < ntfcTableNodes.length; i++) {
                            let checkNode = ntfcTableNodes[i];
                            if ( checkNode.is(":checked") === true ) {counterNtfcCh++;}
                        }
                        counterNtfcCh === ntfcTableNodes.length ? ntfcCheckAll.prop("checked", true)
                                : ntfcCheckAll.prop("checked", false);
                        checkBoxState = true;
                    });

Answer 2

您可以像这样检查选中复选框的长度，而不是遍历复选框：

 alert($('input[type="checkbox"]:checked').length);

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="checkbox" name="vehicle" value="Bike"> I have a bike<br> <input type="checkbox" name="vehicle" value="Car" checked> I have a car<br><input type="checkbox" name="vehicle" value="Bike"> I have a bike<br> <input type="checkbox" name="vehicle" value="Car" checked> I have a car<br><input type="checkbox" name="vehicle" value="Bike"> I have a bike<br> <input type="checkbox" name="vehicle" value="Car" checked> I have a car<br><input type="checkbox" name="vehicle" value="Bike"> I have a bike<br> <input type="checkbox" name="vehicle" value="Car" checked> I have a car<br><input type="checkbox" name="vehicle" value="Bike"> I have a bike<br> <input type="checkbox" name="vehicle" value="Car" checked> I have a car<br>

或者对你来说，它是这样的：

if(ntfcTable.$('input[type="checkbox"]:checked').length == ntfcTableNodes.length) 

Answer 3

尽管如此，对于那些可能面临同样问题的人来说，这个问题被标记为“已回答”，OP 要求的解决方案基本上归结为一个漂亮而整洁的单行：

const ifAllChecked = col => dataTable.rows().nodes().toArray().every(row => $(row).find(`td:eq(${col}) [type="checkbox"]`).is(':checked'));

以下是如何完成的简要演示：

 //define source data const srcData = [ {city: 'Kyiv', visited: true, enjoyed: true}, {city: 'Istanbul', visited: true, enjoyed: true}, {city: 'Moscow', visited: true, enjoyed: false}, {city: 'Nicosia', visited: true, enjoyed: true}, {city: 'New York', visited: false, enjoyed: false}, {city: 'Cairo', visited: true, enjoyed: true} ]; //define datatables object const dataTable = $('#mytable').DataTable({ sDom: 'tp', pageLength: 3, data: srcData, columns: [ {title: 'city', data: 'city'}, { title: 'visited', data: 'visited', render: (data, type, row, meta) => `<input type="checkbox" colindex="${meta.col}" ${data ? 'checked' : ''} style="float:right;margin-right:28px" class="regularchckbx"></input>` }, { title: 'enjoyed', data: 'enjoyed', render: (data, type, row, meta) => `<input type="checkbox" colindex="${meta.col}" ${data ? 'checked' : ''} style="float:right;margin-right:28px" class="regularchckbx"></input>` }, ] }); //essential part of the solution OP was looking for const ifAllChecked = col => dataTable.rows().nodes().toArray().every(row => $(row).find(`td:eq(${col}) [type="checkbox"]`).is(':checked')); //put 'check all' checkboxes into header $(dataTable.columns([1,2]).header()).append(`<input type="checkbox" class="allchecked" style="float:right;margin-right:20px"></input>`); //set initial header checkboxes state [1, 2].forEach( col => dataTable.column(col).header().querySelector('[type="checkbox"]').checked = ifAllChecked(col)); //listen for changes and adjust 'check-alls' $('#mytable').on('click', '.regularchckbx', function(){ dataTable.column($(this).attr('colindex')).header().querySelector('[type="checkbox"]').checked = ifAllChecked($(this).attr('colindex')); }); //check/uncheck all $('.allchecked').on('click', function(){ let col = dataTable.column($(this).closest('th')).index(); let state = this.checked; dataTable.rows().every(function(){ this.node().querySelector(`[colindex="${col}"]`).checked = state; }); });

 <!doctype html> <html> <head> <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css"> <script type="application/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <script type="application/javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script> </head> <body> <table id="mytable"></table> </body> </html>