<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 />
<br>
<br>


<span class="price2">CheckBox Price Here</span>
<br><br><br>

<input class= "radio" type="radio" id="single" value="10" name="licence">
<label>Single License</label><br>
<input class= "radio" type="radio" id="five" value="20" name="licence">
<label>5 License</label><br>
<input class= "radio" type="radio" id="developer" value="30" name="licence">
<label>Developers License</label><br><br><br>


<span class="price">Price after selection will come here</span>

<br><br>
<div>Total: <span class="totalprice"></span> </div>
$(document).ready(function () {
  var price = 0;
  var val = 0;
  var sum = price + val;
  $(".radio").on("change", function () {
    // $(".radio") // select the radio by its id
    // .change(function(){ // bind a function to the change event
    if ($(this).is(":checked")) {
      // check if the radio is checked
      var val = $(this).val(); // retrieve the value
      $(".price").html(val); //Print the value
      sum = Number(sum) + Number(val);
      $(".totalprice").html(sum);
    }
    // });
  });

  $(".checkbox").on("change", function () {
    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
      $(".price2").html(price);
      sum = Number(sum) + Number(price);
      // return sum;
      $(".totalprice").html(sum);
    });
  });
  
});

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