使用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中的data-property true / false？

Answer 1

不要使用数据属性，只需使用Checkbox :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中的data-property true / false？

如果您确实希望保持代码不变，并且仅在更改data-priority时更新checkbox属性，则可以在复选框上实现change侦听器并更改parent属性：

$('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

你可以试试这个：

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

};