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

从复选框数据值更新总计

视图

JS

2 个答案: