javascript - 如何计算表格中的所有值？

Question

我正在用表格进行估算。我可以接受单值类型，例如复选框。合计正确。但是，在文本框中输入数字可能会很麻烦。不能全部加起来。应该是这样的:勾选“多页:100×”复选框，在文本框中输入数字，例如10。总计(小计)应该显示1000。我该如何解决？

$(function() {
  $('.category').each(function() {
    var category = this;

    //選択項目
    $('input[class="value"]', this).change(function() {
      var fee = [];
      $('input[class="value"]:checked', category).each(function() {
        var num = parseInt($(this).val());
        fee.push(num);
      });
      var subtotal = 0;
      for (var i = 0; i < fee.length; i++) {
        subtotal += fee[i];
      }

      $('input[class="aaa"]:checked', category).each(function() {
        //入力値
        var aaa = parseInt($(this).val());
        $('.pages', category).on('change', function() {
          var str = $(this).val();
          var pageNum = Number(str.replace(/[^0-9]/g, ''));
          if (pageNum == 0) {
            pageNum = '';
          }
          $(this).val(pageNum);

          var ccc = [];
          if (pageNum != 0) {
            var price = pageNum * aaa;
            ccc.push(price);
          }
          var subtotal = 0;
          for (var i = 0; i < ccc.length; i++) {
            subtotal += ccc[i];
          }
        });

      });

      $('.xxx', category).val(subtotal);
      var array = [];
      $('.xxx').each(function() {
        var num = parseInt($(this).val());
        array.push(num);
      });
      var total = 0;
      for (var i = 0; i < array.length; i++) {
        total += array[i];
      }
      $('input[class="zzz"]').val(total);
    });
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="">
  <div class="category">
    [Group-A]
    <label><input type="checkbox" class="value" value="100">100</label>
    <label><input type="checkbox" class="value" value="200">200</label>
    <label><input type="checkbox" class="value" value="300">300</label>
    <label>
        <input type="checkbox" class="value aaa" value="100">multiple pages:100×
        <input value="" type="text" class="pages">pages
      </label> [Subtotal]
    <input type="text" class="xxx" value="0">
  </div>
  <div class="category">
    [Group-B]
    <label><input type="radio" class="value" value="100">100</label>
    <label><input type="radio" class="value" value="200">200</label>
    <label><input type="radio" class="value" value="300">300</label>
    <label>
        <input type="checkbox" class="value aaa" value="200">multiple pages:200×
        <input value="" type="text" class="pages">pages
      </label> [Subtotal]
    <input type="text" class="xxx" value="0">
  </div>

  Total:<input type="text" class="zzz" value="0">
</form>

Answer 1

用这段代码替换你的脚本。

var subTotal, total;

$(function() {

        $('input.value, input.pages').unbind('change');
        $('input.value, input.pages').bind('change', function(){
            onAmountUpdate();
        });

});

function onAmountUpdate(){

        total = 0;
        $('.category').each(function(){
            subTotal = 0;
            $(this).find('input[type="checkbox"]:checked, input[type="radio"]:checked').each(function(){
                if($(this).hasClass('aaa')) {
                    subTotal += Number($(this).val()) * Number($(this).next().val());
                }else{
                    subTotal += Number($(this).val());
                }
            });
            $(this).find('.xxx').val(subTotal);
            total += subTotal;
        });

        $('.zzz').val(total);

}