如何计算表单中的所有值

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

Answer 2

请考虑以下代码。

$(function() {
  function calcCatTotal(inp) {
    var cat = $(inp).parents(".category");
    var total = 0;
    var mult = 0;
    $("input.value:checked", cat).not(".mtl").each(function(ind, el) {
      total += parseInt($(inp).val());
    });
    if ($(".mlt", cat).is(":checked")) {
      mult = parseInt($(".pages", cat).val()) * 100;
    }
    total = total + mult;
    $(".sub", cat).val(total);
    calcFullTotal();
  }
  function calcFullTotal() {
    var total = 0;
    $(".sub").each(function() {
      total += parseInt($(this).val());
    });
    $(".total").val(total);
  }
  $("input").change(function() {
    if ($(this).hasClass("mlt")) {
      $(this).siblings(".pages").prop("disabled", !$(this).is(":checked"));
    } else {
      calcCatTotal(this);
    }
  });
});

.category ul {
  padding: 0;
  margin: 0;
  list-style: none;
}
.category ul li {
  margin-left: 1em;
}
.category ul li label {
  margin: 3px;
}
.category ul li input {
  margin-right: 3px;
  border: 1px solid #ccc;
  border-radius: 3px;
}
.category ul li input[type='text'] {
  width: 4em;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="">
  <div class="category group-a">
    [Group-A]
    <ul>
      <li><input type="checkbox" class="value" value="100"><label>100</label></li>
      <li><input type="checkbox" class="value" value="200"><label>200</label></li>
      <li><input type="checkbox" class="value" value="300"><label>300</label></li>
      <li><input type="checkbox" class="mlt" value="0"><label>Multiple pages: 100 × </label><input value="" disabled="true" type="text" class="pages"><label>pages</label></li>
    </ul>
    <label>[Subtotal]</label><input type="text" class="sub" value="0">
  </div>
  <div class="category group-b">
    [Group-B]
    <ul>
      <li><input type="radio" name="group-b" class="value" value="100"><label>100</label></li>
      <li><input type="radio" name="group-b" class="value" value="200"><label>200</label></li>
      <li><input type="radio" name="group-b" class="value" value="300"><label>300</label></li>
      <li><input type="checkbox" class="value mlt" value="200"><label>multiple pages: 200 x</label><input value="" type="text" disabled="true" class="pages"><label>pages</label></li>
    </ul>
    <label>[Subtotal]</label><input type="text" class="sub" value="0">
  </div>
  Total:<input type="text" class="total" value="0">
</form>

如果我们将操作分解为它们自己的函数，我们可以在回调中更轻松地分配它们。这允许许多不同的变化，但我们仍然在执行非常相似的任务。

希望这有帮助。