Total the total of checkbox multiplied by quantity?

I have a checkbox in which the costumer can input the quantity and get the total for that item. I want to show the total of all items in the bottom of the page.

How can I calculate the total of all the checkboxes that were multiplied by their quantity?

I have this code

HTML

<li>
<label>
            the item thumbnail <p>The item</p>

            <input class="1" type="checkbox" name="combos" id="<?php echo get_the_content(); ?>"  value="30"/>
            <div style="display:none;" class="checked-1">
            <input type="number" name="product_1_qty" id="" placeholder="Quantity" class="qty" value="0" />
            </div>         
           <p>Total: PHP <span class='total'>0</span></p>
           <input type="hidden" name="combos[]" value="The item">
</label>
</li>
<li>
<label>
            the item thumbnail <p>The item</p>

            <input class="1" type="checkbox" name="combos" id="<?php echo get_the_content(); ?>"  value="30"/>
            <div style="display:none;" class="checked-1">
            <input type="number" name="product_1_qty" id="" placeholder="Quantity" class="qty" value="0" />
            </div>         
           <p>Total: PHP <span class='total'>0</span></p>
           <input type="hidden" name="combos[]" value="The item">
</label>
</li>

The jquery for the multiplication of quantity

 <script type="text/javascript">
  function toggleDiv(divId) {
        $("#"+divId).slideToggle();
     }
     </script>

    <script>
    $(document).ready(function() {
  var sum = 0;
  var qty = 0;

  $("input[type=checkbox]").change(function() {
    if ($(this).is(':checked')) {
      $(this).next('.checked-1').show();
    } else {
      $(this).next('.checked-1').hide();
    }
  });
  $('.qty').bind('keyup mouseup', function() { // if user typed anyting in the Quantity
    sum = parseInt($(this).parent().prev('.1').val()); // get checkbox value and change the data type to int
    qty = parseInt($(this).val()); // get Quantity value and change the data type to int
    //console.log(sum,qty);
    if (sum && qty) { // if the values was not empty
      $(this).parent().next('p').find('.total').text(sum * qty); // show the result in the total element
    } else { // if the values was empty
      $(this).parent().next('p').find('.total').val(''); // clear the result textbox
    }
  });
});
    </script>    

The jquery for summing all the totals

 <script type="text/javascript">
 function calcscore(){
      var score = 0;
        var checked=$(".total").each(function(){
        score+=parseInt($(this).val());
        });
 $('#price').text(score.toFixed(2));
   }
  $(document).ready(function(){
  $(".calc").change(function(){
     calcscore()
 });
});
 </script>

Which will be showed in this span

<p>Total: PHP <span id="price">0</span></p>

Thank you