title: How to display number of checkbox selected in datatable jquery?
body: <p>I have created a datatable using jquery. It has six columns, first column is checkbox while last column is textbox. Whenever user select checkbox, the count of selected checkbox should be displayed. Something like this:</p>
  
  <p><a href="https://i.stack.imgur.com/ZZe0e.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ZZe0e.png" alt="enter image description here"></a></p>
  
  <p>Below is my jQuery code:</p>
  
  <pre><code> $('#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 '&lt;input type="checkbox" id="select-checkbox" name="payment-checkbox" class="multi-checkbox"/&gt;&lt;label for="select-checkbox"&gt;&lt;/label&gt;';
                   }
              },
              {
                  'targets': 1,
                  'render': function(data, type, full, meta) {
                          return  '&lt;span id="pdf" class="stmt-identifier"&gt;'+data+'&lt;/span&gt;';
                      }
               },
              {
                  '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('&lt;span class="dollar-font-xs"&gt;$&lt;input type="number" id="payement-textbox" class="payment" value="" name="payment-textbox" placeholder="--"/&gt;&lt;/span&gt;');
  
                  }
               }
              ],
          "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('&lt;p class="total"&gt;&lt;span&gt;Total $' + total +'&lt;/span&gt;&lt;/p&gt;');
          }
  
      }); //End of datatable function 
  </code></pre>
  
  <p>Can you suggest how can I display number of checkbox selected by user?</p>