如何顯示在數據表jquery中選擇的複選框的數量？

Question

我已經使用jQuery創建了一個數據表。它有六列，第一列是複選框，而最後一列是文本框。無論何時用戶選擇複選框，都應顯示所選複選框的計數。事情是這樣的：

下面是我的jQuery代碼：

$('#multiple-account-table').dataTable({ 
     "data": [ 
      {"accountNumber":"177723987389","name":"Account 1","alias":"dummy 1","dueDate":"10/19/2016","statementBalance":"34.60"}, 
      {"accountNumber":"3234344333","name":"Account 2","alias":"dummy 2","dueDate":"10/19/2015","statementBalance":"14.50"}, 
      {"accountNumber":"34343443443","name":"Account 3","alias":"dummy 3","dueDate":"10/19/2015","statementBalance":"15.50"}, 
      {"accountNumber":"43433442343","name":"dummy 4","alias":"dummy 4","dueDate":"10/19/2015","statementBalance":"15.50"}, 
      {"accountNumber":"13202553705","name":"dummy 5","alias":"dummy 5","dueDate":"09/19/2016","statementBalance":"100.50"}, 
      {"accountNumber":"13202553706","name":"dummy 6","alias":"dummy 6","dueDate":"12/19/2017","statementBalance":"18.50"}, 
      {"accountNumber":"13202553707","name":"dummy 7","alias":"dummy 7","dueDate":"01/01/2015","statementBalance":"105.50"}, 
      {"accountNumber":"13202553708","name":"dummy 8","alias":"dummy 8","dueDate":"10/19/2015","statementBalance":"15.50"}, 
      ], 
     "dom": 'it', 
     "pageLength": 8, 
     "language": { 
      "info": "", 
      "emptyTable": "No records are available", 
     }, 
     "columns": [ 
      {"data": null}, 
      {"data": "accountNumber"}, 
      {"data": "name"}, 
      {"data": "alias"}, 
      {"data": "dueDate"}, 
      {"data": "statementBalance"}, 
      {"data": null} 

     ], 
     "columnDefs": [ 
      {className: "pad-md-left-p-10 pad-top-bottom-p-10 white-active-bg mouse-link", "targets": [0,1,2,3,4,5,6]}, 
      { 
       'targets': 0, 
       'orderable': false, 
       'render': function(data, type, full, meta) { 
         return '<input type="checkbox" id="select-checkbox" name="payment-checkbox" class="multi-checkbox"/><label for="select-checkbox"></label>'; 
       } 
      }, 
      { 
       'targets': 1, 
       'render': function(data, type, full, meta) { 
         return '<span id="pdf" class="stmt-identifier">'+data+'</span>'; 
        } 
      }, 
      { 
       'targets': 4, 
       "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) { 
       $(nTd).text(date); 
       } 
      }, 
      { 
       'targets': 5, 
       'orderable': false, 
       "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) { 
        $(nTd).html('$'+sData); 
       } 
      }, 
      { 
       'targets': 6, 
       "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) { 
        $(nTd).html('<span class="dollar-font-xs">$<input type="number" id="payement-textbox" class="payment" value="" name="payment-textbox" placeholder="--"/></span>'); 

       } 
      } 
      ], 
     "aaSorting": [[4, 'asc'], [5,'desc'], [1,'asc'] ], 
     "footerCallback": function (row, data, start, end, display) { 
      var api = this.api(), data; 

      // Remove the formatting to get integer data for summation 
      var intVal = function (i) { 
       return typeof i === 'string' ? 
        i.replace(/[\$,]/g, '')*1 : 
        typeof i === 'number' ? 
         i : 0; 
      }; 
      // Total over all pages 
      total = api 
       .column(5) 
       .data() 
       .reduce(function (a, b) { 
        return intVal(a) + intVal(b); 
       }, 0); 

      // Update footer 
      $(api.column(5).footer()).html('<p class="total"><span>Total $' + total +'</span></p>'); 
     } 

    }); //End of datatable function 

您能否提供我怎麼能顯示由用戶選擇的複選框的數量？

Answer 1

執行復選框計數每次使用支票複選框：

var countChecked = function($table, checkboxClass) { 
 
    if ($table) { 
 
    // Find all elements with given class 
 
    var chkAll = $table.find(checkboxClass); 
 
    // Count checked checkboxes 
 
    var checked = chkAll.filter(':checked').length; 
 
    // Count total 
 
    var total = chkAll.length;  
 
    // Return an object with total and checked values 
 
    return { 
 
     total: total, 
 
     checked: checked 
 
    } 
 
    } 
 
} 
 

 
$(document).on('change', '.chk', function() { 
 
    var result = countChecked($('#myTable'), '.chk'); 
 
    $('#checked').html(result.checked); 
 
    $('#total').html(result.total); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 
Checked: <span id="checked"></span>/Total: <span id="total"></span> 
 
<table id="myTable"> 
 
    <tbody> 
 
    <tr><td><input class="chk" type="checkbox" /></td><td>Text</td></tr> 
 
    <tr><td><input class="chk" type="checkbox" /></td><td>Text</td></tr> 
 
    <tr><td><input class="chk" type="checkbox" /></td><td>Text</td></tr> 
 
    <tr><td><input class="chk" type="checkbox" /></td><td>Text</td></tr> 
 
    <tr><td><input class="chk" type="checkbox" /></td><td>Text</td></tr> 
 
    <tr><td><input class="chk" type="checkbox" /></td><td>Text</td></tr> 
 
    <tr><td><input class="chk" type="checkbox" /></td><td>Text</td></tr> 
 
    <tr><td><input class="chk" type="checkbox" /></td><td>Text</td></tr> 
 
    <tr><td><input class="chk" type="checkbox" /></td><td>Text</td></tr> 
 
    </tbody> 
 
</table>