Rechnen mit Javascript in einer Tabelle

[Felix Riesterer]

Lieber Pit,

<td width=10%><span id="myKB">102</span> kb</td></tr><tr><td 
<td width=10%><span id="myKB">102</span> kb</td></tr><tr><td 
<td width=10%><span id="myKB">692</span> kb</td></tr><tr><td 

Wenn denn die Tabelle wirklich sein muss (muss sie nicht), dann eher so (Fiddle dazu):

<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-1" value="102" checked>
          102 KB
        </label>
      </td>
      <td>
        <label>
          <input type="checkbox" name="myAuswahl-2" value="42" checked>
          42 KB
        </label>
      </td>
      <td>
        <label>
          <input type="checkbox" name="myAuswahl-3" value="9" checked>
          9 KB
        </label>
      </td>
      <td>
        <label>
          <input type="checkbox" name="myAuswahl-4" value="962" checked>
          962 KB
        </label>
      </td>
    </tr>
  </tbody>
</table>
<p>Summe: <output>?</output>KB</p>
<script>

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"));

</script>

Liebe Grüße

Felix Riesterer