Как я могу рассчитать все значения в форме?

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

Рассмотрим следующий код.

$(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>

Если мы разбиваем операции на их собственные функции, мы можем немного проще назначить их в обратных вызовах.Это допускает много разных вариантов, но мы все еще выполняем очень похожие задачи.

Надеюсь, это поможет.

Answer 2

Замените ваш скрипт этим кодом.

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

}