php - 将复选框值与输入框值相乘 - Jquery

Question

我目前正在努力获取我从复选框返回的值，以使用 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/

Answer 1

您试图将一个元素值设置为 total ID 作为最终结果，但您的 html 代码中没有这样的元素。
只需在您的 html 代码中添加此元素 (在这里我放了另一个文本框):

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

查看 Live demo for your fix

或者您可以使用更好的编码:(阅读评论)- Working DEMO

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