Question

如何在jquery中获取HTML5数据属性的总和？例如，当检查一个和两个时，值必须为15，当没有选中时，值等于0.

$('.price').html(parseInt($(this).attr('data-price')));

HTML：

<input class="checkbox" id="one" type="checkbox" checked data-link="111" data-price="10">one<br />
<input class="checkbox" id="two" type="checkbox" checked data-link="222" data-price="5">two<br />
<input class="checkbox" id="three" type="checkbox" checked data-link="333" data-price="2">three<br />
<a href="111,222,333">link</a>
<span class="price">17</span>

javascipt的：

$('.checkbox').on("change", function() {
    var links = [];//array for links
    $('.checkbox').filter(":checked").each(function() {
        links.push($(this).attr('data-link'));//get links

        //sum of all price values of this into price
        $('.price').html(parseInt($(this).attr('data-price')));
    });

    $("a").attr("href", links.join(",")); // change link
});

Fiddle

Answer 1

您需要修改代码，以便在循环的每次迭代之间保持运行总计。试试这个：

$('.checkbox').on("change", function () {
    var links = []; //array for links
    var totalPrice = 0;

    $('.checkbox:checked').each(function () {
        links.push($(this).data('link')); //get links
        totalPrice += $(this).data('price');
    });

    $('.price').html(totalPrice);
    $("a").attr("href", links.join(",")); // change link
});

Example fiddle

请注意，使用data()代替attr('data-x')

也更快

Answer 2

Fiddle Demo

$('.checkbox').on("change", function () {
    var links = [],
        sum = 0; //set sum initially to 0
    $('.checkbox').filter(":checked").each(function () {
        links.push($(this).attr('data-link'));
        //add prices of the checked check-boxes to sum
        sum += +$(this).attr('data-price'); // or +$(this).data('price');
    });
    $('.price').html(sum);
    $("a").attr("href", links.join(","));
});

Answer 3

Updated jsFiddle

我为data-price创建了新数组，然后在其中添加了所有元素。

    dataPrices.push($(this).attr('data-price'));//get links
    for (var i = 0; i< dataPrices.length; i++) {
        result += ary[i];
    }
    //sum of all price values of this into price
    $('.price').html(result);

Answer 4

试试这个

$('.checkbox').on("change", function() {
    var links = [];//array for links
    var tempsum=0;
    $('.checkbox').filter(":checked").each(function() {
        links.push($(this).attr('data-link'));//get links

        //sum of all price values of this into price
        tempsum = parseInt(tempsum) + parseInt($(this).attr('data-price'))
    });
$('.price').html(tempsum);
    $("a").attr("href", links.join(",")); // change link

});

DEMO

Answer 5

检查DEMO

  $('.checkbox').on("change", function() {
    var links = [];//array for links
    var price = 0;
    $('.checkbox').each(function() {
        links.push($(this).attr('data-link'));//get links
        if($(this).is(':checked')){
           price = price + parseInt($(this).attr('data-price'));
        }
        //sum of all price values of this into price
        $('.price').html(price);
    });

    $("a").attr("href", links.join(",")); // change link

});

数据属性的总和

5 个答案: