Question

我正在使用带有两个复选框列的jquery数据表，其中表标题中的每一列都有一个checkall复选框。我要遍历数据表中每个复选框更改事件的所有复选框，以确保选中/未选中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>

jQuery DataTable复选框

3 个答案: