JSFiddle - React, Tailwind, and code Playground

HTML

<table>
  <thead>
    <tr>
      <th>Test1</th>
      <th>Test2</th>
      <th>Test3</th>
      <th>Test4</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <label>
          <input type="checkbox" name="myAuswahl[]" value="102" checked>
          102 KB
        </label>
      </td>
      <td>
        <label>
          <input type="checkbox" name="myAuswahl[]" value="42" checked>
          42 KB
        </label>
      </td>
      <td>
        <label>
          <input type="checkbox" name="myAuswahl[]" value="9" checked>
          9 KB
        </label>
      </td>
      <td>
        <label>
          <input type="checkbox" name="myAuswahl[]" value="962" checked>
          962 KB
        </label>
      </td>
    </tr>
  </tbody>
</table>
<p>Summe: <output>?</output>KB</p>

JavaScript

const elements = document.querySelectorAll('[name^="myAuswahl"]');

elements.forEach(function (el) {

  el.addEventListener("change", function () {

    var summe = 0;

    elements.forEach(function (checkbox) {

      if (checkbox.checked) {
        summe += parseFloat(checkbox.value);
      }
    });

    document.querySelector("output").value = summe;
  });
});

// Anfangswert berechnen
elements[0].dispatchEvent(new Event("change"));