JSFiddle - React, Tailwind, and code Playground

HTML

<h1>Receipts</h1>
<h2>Sum of selected invoices is AED <div class="totalsum"></div></h2>
<table border="1" id="rcpt"><tr><th><input type="checkbox" onClick="selectAll(this),updateSum()" /></th><th>Invoice No.</th><th>Date</th><th>Balance</th></tr>
<tr>
  <td><input type="checkbox" class="checkbox" name="select[]" value="2" onclick="updateSum()" /></td>
  <td>INV-2020-0001</a></td>
  <td>31-05-2020</td>
  <td class="balance">56,842.50</td>
</tr>
<tr>
  <td><input type="checkbox" class="checkbox" name="select[]" value="3" onclick="updateSum()" /></td>
  <td>INV-2020-0002</a></td>
  <td>10-06-2020</td>
  <td class="balance">96,962.60</td>
</tr>
<tr>
  <td><input type="checkbox" class="checkbox" name="select[]" value="4" onclick="updateSum()" /></td>
  <td>INV-2020-0003</a></td>
  <td>15-06-2020</td>
  <td class="balance">100,251.20</td>
</tr>
</table>

JavaScript

function selectAll(source) {
  select = document.getElementsByName('select[]');
  for(var i=0, n=select.length;i<n;i++) {
    select[i].checked = source.checked;
  }
}

function updateSum() {
      var total = 0;
      var select = $(".checkbox:checked");
      var balance = $(".balance");
      select.each(function() { total += parseFloat(balance.html().replace(/,/g, ''));})
      $(".totalsum").html(total.toFixed(2));
    }