如何分别添加每个内容的值并将其全部添加？

Question

我想以表格形式计算值。每个表中具有类别类别的每个总计都需要在名为小计的文本框中填充。然后，需要添加每个名为小计的输入值，并将其填充到名为total的文本框中。 但是，我完全堆砌了，于是，无法弄清楚。请帮忙。

我试图循环每个表进行计算，但是没有用。

function calc() {
  price = 0;
  for (i = 0; i < document.myform.length - 1; i++) {
    if (document.myform.elements[i].checked) {
      price += eval(document.myform.elements[i].value);
    }
  }
  document.myform.subtotal.value = price;
  var sumup = 0;
  for (var i = 0; i < subtotal.length; i++) {
    sumup += eval(subtotal[i].value);
  }
  document.myform.total.value = sumup;
  document.myform.discount30.value = sumup * .7;
}

<form name="myform">
  <table class="category">
    <tr>
      <td>
        <label><input type="checkbox" value="500" onClick="calc()">500</label>
        <label><input type="checkbox" value="500" onClick="calc()">500</label>
      </td>
    </tr>
    <tr>
      <td>
        <label><input type="checkbox" value="500" onClick="calc()">500</label>
        <ul>
          <li><label><input type="checkbox" value="500" onClick="calc()">500</label></li>
          <li><label><input type="checkbox" value="500" onClick="calc()">500</label></li>
        </ul>
      </td>
    </tr>
    <tr>
      <td>
        <label><input type="checkbox" value="500" onClick="calc()">500</label>
        <input type="text" name="text" value="">
      </td>
    </tr>
    <tr>
      <td>
        <label><input type="radio" name="xxx" value="500" onClick="calc()">500</label>
        <label><input type="radio" name="xxx" value="500" onClick="calc()">500</label>
        <label><input type="radio" name="xxx" value="500" onClick="calc()">500</label>
        <input type="text" value="">
      </td>
    </tr>
    <tr>
      <td>
        <label><input type="radio" value="0" name="yyy" onClick="calc()">Yes</label>
        <ul>
          <li><label><input type="radio" name="zzz" value="500" onClick="calc()">500</label></li>
          <li><label><input type="radio" name="zzz" value="500" onClick="calc()">500</label></li>
        </ul>
        <label><input type="radio" value="0" name="yyy" onClick="calc()">No</label>
      </td>
    </tr>
    <tr>
      <td><label>amount：<input type="text" name="subtotal">yen</label></td>
    </tr>
  </table>
  <table class="category">
    <tr>
      <td>
        <label><input type="checkbox" value="500" onClick="calc()">500</label>
        <label><input type="checkbox" value="500" onClick="calc()">500</label>
      </td>
    </tr>
    <tr>
      <td>
        <label><input type="checkbox" value="500" onClick="calc()">500</label>
        <ul>
          <li><label><input type="checkbox" value="500" onClick="calc()">500</label></li>
          <li><label><input type="checkbox" value="500" onClick="calc()">500</label></li>
        </ul>
      </td>
    </tr>
    <tr>
      <td>
        <label><input type="checkbox" value="500" onClick="calc()">500</label>
        <input type="text" name="text" value="">
      </td>
    </tr>
    <tr>
      <td>
        <label><input type="radio" name="xxx" value="500" onClick="calc()">500</label>
        <label><input type="radio" name="xxx" value="500" onClick="calc()">500</label>
        <label><input type="radio" name="xxx" value="500" onClick="calc()">500</label>
        <input type="text" value="">
      </td>
    </tr>
    <tr>
      <td>
        <label><input type="radio" value="0" name="yyy" onClick="calc()">Yes</label>
        <ul>
          <li><label><input type="radio" name="zzz" value="500" onClick="calc()">500</label></li>
          <li><label><input type="radio" name="zzz" value="500" onClick="calc()">500</label></li>
        </ul>
        <label><input type="radio" value="0" name="yyy" onClick="calc()">No</label>
      </td>
    </tr>
    <tr>
      <td><label>amount：<input type="text" name="subtotal">yen</label></td>
    </tr>
  </table>



  <table class="output">
    <tr>
      <td><label>total：<input type="text" name="total">yen</label></td>
    </tr>
    <tr>
      <td><label>30% discount：<input type="text" name="discount30">yen</label></td>
    </tr>
    <tr>
      <td><input type="reset" value="reset"></td>
    </tr>
  </table>

</form>