javascript - Sum of data attributes - Stack Overflow

admin管理员组

文章数量:1343373

How can I get the sum of HTML5 data attributes in jquery? Eg, when one and two are checked the value needs to be 15, when none are checked the value equals 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

How can I get the sum of HTML5 data attributes in jquery? Eg, when one and two are checked the value needs to be 15, when none are checked the value equals 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

• javascript
• jquery

Share Improve this question Follow edited Apr 29, 2014 at 12:06 Cerbrus 73k1919 gold badges136136 silver badges150150 bronze badges asked Apr 29, 2014 at 12:03 YunoworkYunowork 34511 gold badge66 silver badges1515 bronze badges 1

• jsfiddle/FBJ3S/3 – Satpal Commented Apr 29, 2014 at 12:07

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 8

You need to amend your code so that you keep a running total between each iteration of the loop. Try this:

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

Note that it's also quicker to use data() instead of attr('data-x')

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(","));
});

Updated jsFiddle

I created new array for data-price and then added all elements in it.

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

Try this

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

Check the 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

});

本文标签： javascriptSum of data attributesStack Overflow