使用jQuery将使用复选框的数据属性从false更改为true

Question

我已经在一个表中创建了项目列表。我想计算选中项目的价格，但不知道如何在选中/取消选中复选框时更新数据属性。我已经包含了生成列表和更新价格计算的代码。

$.each(shopList, function (i, elem) {
    var item = elem.item;
    var link = elem.link;
    var user = elem.user;
    var price = elem.price;
    var priority = elem.priority;
    $(".listItems").append(
        '<tr class="items" data-priority="' + priority + '">' +
        '<td><input type="checkbox" class="priority"' + ((priority) ? 'checked' : '') + ' /></td>' +
        '<td>' + '<a href="' + link + '" target="_blank">' + item + '</a>' + '</td>' +
        '<td>' + user + '</td>' +

        '<td class="price">' + price + '</td>' +
        '<td><button class="btn btn-default deleteItem">Del </button></td>' +
        '</tr>'
    );
});

以及更新价格的代码：

function updatePriority(){
    sumPriority = 0;
    $('tr.items[data-priority=true] .price').each(function () {
        var total = $(this).text();
        if (!isNaN(total) || total.length != 0) {
            sumPriority += parseFloat(total);
        };
    });
    $('.totalPriority').html(sumPriority.toFixed(2));
};

当页面呈现时，它有已检查和未检查的项目，起初一切都是这样，但当进行更改时就不会了。如何更新DOM中的数据属性true/false？

Answer 1

不要使用数据属性，只使用复选框:checked状态

您可以循环使用选中的复选框，而不是循环使用[data-priority=true]复选框，并使用parent().find('.price')查找正确的价格标签。

function updatePriority(){
    sumPriority = 0;
    $('.priority:checked').each(function () {
        var priceElement = $(this).parent().parent().find('.price');
        var total = priceElement.text();
        if (!isNaN(total) || total.length != 0) {
            sumPriority += parseFloat(total);
        };
    });
    $('.totalPriority').html(sumPriority.toFixed(2));
};

---

如何更新DOM中的数据属性true/false？

如果您真的想保持代码的原样，并且在更改checkbox时只更新data-priority属性，则可以在复选框上实现change侦听器并更改parents属性：

$('tr.items .price').change(function() {
    if ($(this).is(":checked")) {
        $(this).parent().parent().attr("data-priority",true);
    }else{
        $(this).parent().parent().attr("data-priority",false);
    }        
});

Answer 2

你可以试试这个：

函数updatePriority（）{sumPriority=0；

$('.listItems tr td .priority').each(function () {
     if ($(this).is(":checked"))
     {
        var price=$(this).parent().find('.price').text();
        var total = price;
        if (!isNaN(total) || total.length != 0) {
        sumPriority += parseFloat(total);
        };
     }
});
$('.totalPriority').html(sumPriority.toFixed(2));

}；