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

Answer 2

如果每个复选框和输入框都位于对应的div下，并且您只需要一次乘以它，则可以尝试一下，不需要每次each，也许会对您有所帮助。 / p>

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

jQuery仅在下一个输入大于1时乘以值

2 个答案: