将复选框值与输入框值相乘- 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'>

查看

或者你可以使用更好的编码：(阅读评论)-

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