从复选框数据值更新总数

Update total from checkbox data vaules

本文关键字：更新 复选框 数据      更新时间：2023-09-26

我有代码，我可以得到正确地加起来的值，每个复选框有一个数据属性值，我想更新的总数取决于哪些复选框被选中。

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

<<h3>视图/h3>
<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);
}

为了获得总价，循环遍历每个选中的复选框并添加数据值。您可以使用: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);
});

小提琴

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

用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);
}
相关文章：