title: Multiply checkbox data attribute with input value
body: <p>Each time I check any checkbox, I want to multiply the data-price attribute with the value of the input field associated with the checkbox. I need to calculate the sum of all these multiplications. </p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;input class="selectproduct" type="checkbox" name="item0" data-price="5"/&gt;First 
  &lt;input type="text" class="qty0" name="qty0"/&gt;
  &lt;br/&gt;
  &lt;input class="selectproduct" type="checkbox" name="item1" data-price="7"/&gt;Second 
  &lt;input type="text" class="qty1" name="qty1"/&gt;
  &lt;br/&gt;
  Total Price: $&lt;span class="price"&gt;0&lt;/span&gt;
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>$('.selectproduct').on("change", function () {
      var totalPrice = 0;
  
      $('.selectproduct:checked').each(function () {
          totalPrice += parseInt($(this).data('price'), 10);
      });
  
      $('.price').html(totalPrice);
  });
  </code></pre>
  
  <p>I'm currently able to sum the price according to the checkbox but I can't figure out how to multiply it with the associated input field whenever there is a change. How do I constantly update the sum whenever the input field changes?</p>
  
  <p>Here's the fiddle: <a href="https://jsfiddle.net/600rzptn/" rel="nofollow">https://jsfiddle.net/600rzptn/</a></p>