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

Posted 2023-05-09

【中文标题】仅当下一个输入大于 1 时，Jquery 才乘以值

【英文标题】：Jquery multiply value only if next input is greater than 1

【发布时间】：2019-03-15 23:33:09

【问题描述】：

希望这将是一个相当简单的问题。我还在学习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>

【问题讨论】：

数量为0有什么问题？那不应该只是将价格乘以 0，然后什么都不加吗？

$('input:checkbox').trigger('change'); 会触发很多事件。您可能应该使用input:checkbox:first

或者将所有代码移动到一个命名函数中，您可以从两个事件处理程序中调用该函数。

我还得看一些表格。形成我所理解的。表单中有复选框和文本输入字段，一旦有人选中复选框，复选框的值将乘以文本输入中的值，然后添加到表单底部的文本输入中。那是对的吗？再次查看一些 HTML 会有所帮助。

是否需要将所有复选框相乘并在底部框中显示结果？

【参考方案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 
            );    
        );

【参考方案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>