仅当下一个输入大于 1 时，Jquery 才乘以值

Question

希望这将是一个相当简单的问题。我还在学习jquery，所以请多多包涵，感谢您的耐心等待。我无法通过搜索找到答案。 我正在编写一个相当简单的网站，它需要一个表单来处理大量相当重复的数据，因此按单个 ID 定位太麻烦了。

我想要做的是将每个复选框的值（选中复选框时）乘以下一个输入 -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

此代码有效。抱歉，过了一段时间才回复您。如果您有任何其他问题，请告诉我。

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

Answer 2

如果每个复选框和输入框都在对应的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>