用Jquery将多选框的值乘以输入框的值

Question

用Jquery将多选框的值乘以输入框的值

3

我目前在使用jQuery时遇到了一个问题，无法将复选框返回的值与输入框中的值相乘。

当勾选复选框时，我会显示一个div来询问数量，然后必须将数量与复选框的值相乘。

以下是当前的代码：

$(document).ready(function () {
    var sum = 0;
    var qty = 0;

    $("input[type=checkbox]").change(function () {
        recalculateQty();
        recalculateCheck();
        if ($('#1').is(':checked')) {
            $('#checked-1').show();
        } else {
            $('#checked-1').hide();
        }
        if ($('#2').is(':checked')) {
            $('#checked-2').show();
        } else {
            $('#checked-2').hide();
        }
        if ($('#3').is(':checked')) {
            $('#checked-3').show();
        } else {
            $('#checked-3').hide();
        }
    });

    function recalculateQty() {
        $('.qty').keyup(function () {
            $('.qty').each(function () {
                qty += parseInt(this.value, 10);
                recalculateCheck();
            });
        });
    }

    function recalculateCheck() {
        var sum = 0;
        $("input[type=checkbox]:checked").each(function () {
            sum += parseInt($(this).val());
        });
        $('.qty').keyup(function () {
            $('.qty').each(function () {
                qty += parseInt(this.value, 10);
            });
        });
        $('#total').val(sum * qty);
    }
});

<input type="checkbox" id="1" value="30" name="1" />
<input type="checkbox" id="2" value="60" name="2" />
<input type="checkbox" id="3" value="90" name="3" />

<div style="display:none;" id="checked-1">
    <input type="text" name="product_1_qty" id="product_1_qty" placeholder="Quantity" class=" qty" value="0" />
</div>

http://jsfiddle.net/isherwood/9vRtJ/1/

- user2429578

1

你遇到了什么问题？有错误吗？另外，recalculateCheck();是什么意思？它似乎在上面的代码中缺失了。 - tymeJV

2

你不应该混合你的JavaScript和PHP代码。不要在这里使用PHP进行迭代。你应该添加 var num_products = <?= $num_products ?>; 并使用JS进行迭代：var x; for(x = 1; x <= num_products; x++) { ... }。 - Pavel Strakhov

非常感谢您的建议，@tymeJV。我已经更新了代码并添加了缺失的函数。谢谢。 - user2429578

谢谢，我尝试简化了一下并添加了HTML。没有错误，除非它乘以复选框未被选中和重新选中时重新相乘。 - user2429578

1

每次值发生变化时，您都在添加两个keyup处理程序，您应该只使用change事件或仅使用keyup事件。 - Ruan Mendes

显示剩余4条评论

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Siamak Motlagh · Answer 1

你正在尝试将具有ID为total的元素值设置为最终结果，但是在你的HTML代码中没有这样的元素。
只需在你的HTML代码中添加此元素（这里我放了另一个文本框）即可：

<input type="text" id='total'>

请查看您的修复的实时演示

或者您可以使用更好的编码：（阅读注释）- 工作演示

$(document).ready(function () {
    var sum = 0;
    var qty = 0;
    $("input[type=checkbox]").change(function () {
        if ($('#1').is(':checked')) {
            $('#checked-1').show(); 
        } else {
            $('#checked-1').hide();
        }
    });
     $('.qty').keyup(function () { // if user typed anyting in the Quantity
          sum = parseInt($('#1').val()); // get checkbox value and change the data type to int
          qty = parseInt($(this).val()); // get Quantity value and change the data type to int
          //console.log(sum,qty);
          if(sum && qty) { // if the values was not empty
              $('#total').val(sum * qty); // show the result in the total element
          } else { // if the values was empty
              $('#total').val(''); // clear the result textbox
          }
     });
});