我怎么能计算形式的所有值？

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>

如果我们的业务分解到自己的功能，我们可以将它们在回调中更容易一些。这让很多不同变化的又我们仍在执行非常类似的任务。

希望这可以帮助。