JQuery умножает значение, только если следующий вход больше 1

Question

Надеюсь, это будет довольно простой вопрос.Я все еще учусь jquery, поэтому, пожалуйста, потерпите меня и спасибо за ваше терпение.Я не мог найти ответ с помощью поиска.Я пишу довольно простой сайт, и мне нужна была форма, которая обрабатывает огромное количество довольно повторяющихся данных, поэтому таргетинг по отдельным идентификаторам слишком громоздкий.

Что я пытаюсь заставить его сделатьумножить значение каждого флажка (если флажок установлен) на следующий ввод -only- и добавить его к общей цене, отображаемой в поле ввода в конце формы.

Я получил егочтобы умножить, но у него была проблема, что если поля ввода были пустыми или имели значение 0, однако, если я установил значения каждого входа на 1 минимум, он также отправляет все значения этих на сервер, вызываячрезвычайно загроможденная форма потребления.(Мне нужно, чтобы он был читаемым при получении, в конце концов ...)

Так что я подумал, что для защиты от взлома полей ввода я буду кодировать его так, чтобы - если значение ввода больше 1, он умножит число входных данных на номер флажка и добавит это число к итогу - если нет, то просто добавит значение флажка к итогу, а не умножит что-либо.Таким образом, даже если они возятся с вводом, чтобы сделать его -1 или что-то еще, сумма по-прежнему правильно удерживается.

Я пытался сделать это, и это сломалось, и я не могу заставить его работать ... Любая помощь будет оценена, любое объяснение того, как туда добраться, также будет оценено.

Это мой jquery:

$(document).ready(function() {

  $('input:checkbox').change(function() {
    var price = 0;
    $('input:checkbox:checked').each(function() {
      if ((this).next('input').val() > 1) {
        price += $(this).val() * $(this).next("input[name^='qty']").val();
      } else {
        price += parseInt($(this).val());
      }
    });
    $("#price").val(price);
  });
  $('input[type="number"]').change(function() {
    $('input:checkbox').trigger('change');
  });
});

Это выборка соответствующего html, каждый флажок и входная пара вместе в своем собственном div, как это:

 <div class="lineitem"><input type="checkbox" name="SN56803" value="96" /> <input type="number" name="qtySN56803" class="qty" min="-1" max="100"> </div>

Answer 1

Если каждый флажок и поле ввода находятся под соответствующим div, и вам нужно только умножить его за раз, вы можете попробовать это, вам не нужно each каждый раз, может быть, это поможет вам.

$('input:checkbox').change(function() {
                var price = 0;
                var _next = $(this).next();
                if (_next.val() > 1) {
                    price += $(this).val() * _next.val();
                }
                else {
                    price += parseInt($(this).val());
                }
                $("#price").val(price);

            });
            $('input[type="number"]').change(function() {
                $(this).prev().trigger('change');
            });

<div class="lineitem"><input type="checkbox" name="SN56803" value="96" /> <input type="number" name="qtySN56803" class="qty" min="-1" max="100"> </div>

Answer 2

Этот код работает.Извините, что потребовалось время, чтобы вернуться к вам.Дайте мне знать, если у вас есть дополнительные вопросы.

HTML

<form action="">
        <div class="lineitem"><input type="checkbox" name="SN56803" value="96" /> <input type="number" name="qtySN56803" class="qty" min="0" max="100"> </div>
        <div class="lineitem"><input type="checkbox" name="SN56803" value="22" /> <input type="number" name="qtySN56803" class="qty" min="0" max="100"> </div>
        <div class="lineitem"><input type="checkbox" name="SN56803" value="2" /> <input type="number" name="qtySN56803" class="qty" min="0" max="100"> </div>
        <div class="lineitem"><input type="checkbox" name="SN56803" value="66" /> <input type="number" name="qtySN56803" class="qty" min="0" max="100"> </div>
        <div class="lineitem"><input type="checkbox" name="SN56803" value="45" /> <input type="number" name="qtySN56803" class="qty" min="0" max="100"> </div>
        <div class="lineitem"><input type="checkbox" name="SN56803" value="23" /> <input type="number" name="qtySN56803" class="qty" min="0" max="100"> </div>
        <div class="lineitem"><input type="checkbox" name="SN56803" value="87" /> <input type="number" name="qtySN56803" class="qty" min="0" max="100"> </div>
        <div class="lineitem"><input type="checkbox" name="SN56803" value="68" /> <input type="number" name="qtySN56803" class="qty" min="0" max="100"> </div>
        <div class="lineitem"><input type="checkbox" name="SN56803" value="5" /> <input type="number" name="qtySN56803" class="qty" min="0" max="100"> </div>
        <label for="">Button Total</label>
        <input type="number" id="btnTotal" disabled>
        <label for="">Greand Total</label>
        <input type="number" id="grandTotal" disabled>
    </form>

JavaScript

$(function() {

            var totalSum = [], //store the numbers that will be added together 
                grandSum = 0; // store the grand total

            // Function to be used in the array redue to add the input numbers together
            function sumTotal(val, val2) {
                grandSum = val + val2; // add the numbers from the "totalSum" array
                return val + val2; // return the result from the array reduce method
            }

            // listen to the checkbox change state
            $('input[type="checkbox"]').on('change', function() {
                var inputResult = $(this).val() * $(this).next('input').val(); //multiply the value of the checkbox and the number input

                totalSum.push(inputResult); // push the current input sum into the array to be summed 
                totalSum.reduce(sumTotal);  // sum the numbers in the "totalSum" array using the array reduce method

                $('#btnTotal').val(inputResult);                // show the sum of the two input fields
                $('#grandTotal').val(grandSum || inputResult);  // show the sum of grand total of the numbers 
            });    
        });