<input class="checkbox" id="1" type="checkbox" data-price="10">one<br />
<input class="checkbox" id="2" type="checkbox" data-price="5">two<br />
<input class="checkbox" id="3" type="checkbox" data-price="2.7">three<br />


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

        
    });
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js