从复选框数据库中更新总计

Question

我有代码可以正确地将值加起来，每个复选框都有一个数据属性值，我想根据勾选的复选框来更新总数。

目前，它只是在1字符串中显示值，而不是计算新的总计。

视图

<input type="checkbox" onchange="checkTotal()" checked id="product-1" data-product-price="19.85">
<input type="checkbox" onchange="checkTotal()" checked id="product-2" data-product-price="17.25">
<input type="checkbox" onchange="checkTotal()" checked id="product-3" data-product-price="18.65">
<input type="checkbox" onchange="checkTotal()" checked id="product-4" data-product-price="16.35">

JS

$(document).ready(function () {
    $('#prod1').val(true);
    $('#prod2').val(true);
    $('#prod3').val(true);
    $('#prod4').val(true);
});

function checkTotal() {
    var checks = $("input[id*='product-']");
    var tot = "68.95";
    checks.each(function () {
        var checkbox = this;
        if (checkbox.checked) {
            tot += $(this).data("product-price");
            console.log($(this).data("product-price"));
            if (checkbox.id == 'product-1') {
                $('#prod1').val(true);
            }
            if (checkbox.id == 'product-2') {
                $('#prod2').val(true);
            }
            if (checkbox.id == 'product-3') {
                $('#prod3').val(true);
            }
            if (checkbox.id == 'product-4') {
                $('#prod4').val(true);
            }
        }
        if (!checkbox.checked) {
            if (checkbox.id == 'product-1') {
                $('#prod1').val(false);
            }
            if (checkbox.id == 'product-2') {
                $('#prod2').val(false);
            }
            if (checkbox.id == 'product-3') {
                $('#prod3').val(false);
            }
            if (checkbox.id == 'product-4') {
                $('#prod4').val(false);
            }
        }
    });

    var totalSpan = $('#totalAmount');
    totalSpan.text(tot);
}

Answer 1

为了得到总价格，循环通过每个选中的复选框并添加数据值.您可以使用:selected只获取选定的复选框。

$("input[type='checkbox']").change(function () {
    var tot = 0;
    $("input[type='checkbox']:checked").each(function () {
        tot += $(this).data("product-price");
    });
    var number = this.id.split("-")[1];
    $('#prod' + number).val(this.checked);
    var totalSpan = $('#totalAmount');
    totalSpan.text(tot);
});

Fiddle

请注意，您不必为复选框的change事件编写内联代码。您可以将它绑定到jquery。

Answer 2

用jQuery库试试这个！首先，如果选中该复选框并将其存储在数组中，我将得到data-product-price的值，然后简单地将数组的所有值添加到下面的循环检查中，如果您不理解，只需在此注释:)您的HTML：

<input type="checkbox" checked id="product-1" data-product-price="19.85">
<input type="checkbox" checked id="product-2" data-product-price="17.25">
<input type="checkbox" checked id="product-3" data-product-price="18.65">
<input type="checkbox" checked id="product-4" data-product-price="16.35">
<br>Total<input type = "text" name = "total" id = "total">

你的JS

$( document ).ready(function() {
    checkTotal();

    $('input[type="checkbox"]').on("click", function(){
        checkTotal();
    });
});

function checkTotal(){
    var selected = [];
    var total = 0;
    $('input[type="checkbox"]:checked').each(function() {
        selected.push($(this).attr('data-product-price'));
    });

    for( var x = 0; x < selected.length; x++ ){
        total += selected[x] * 1;
    }

   $("#total").val(total);
}