mercredi 18 novembre 2015

Change data property using checkbox from false to true using jQuery

I have created list of items in a table. I want to calculate the price of checked items, but can't figure out how to update the data property when a checkbox is checked/unchecked. I have included the code for generating the list and updating the price calculation.

$.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>'
    );
});

And the code to update the price:

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

When the page renders it has checked and unchecked items and everything works that way at first, but not when a change is made. How can I update the data-property true/false in the DOM?




Aucun commentaire:

Enregistrer un commentaire