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

Question

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

我试图让它做的是将每个复选框的值(选中该复选框时)乘以下一个输入(仅)，并将其添加到最后输入字段中显示的总价格的形式。

我让它相乘，但它有一个问题，如果输入字段为空或值为 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 
            });    
        });