Check the checkbox by clicking on the div - doesn't work with another function

I have many items with different characteristics, and need to display the sum of characteristics of the selected items.

*example

Item-1: mass - 1 kg / cost - 1$ (selected)
Item-2: mass - 3 kg / cost - 5$ (selected)

— Summary: mass - 4 kg / cost - 6$

The main problem of my code is... when I click on checkboxes - sum works, but it doesn't, when I try to select all the checkboxes by clicking on the div.

Simplified Demo... (the point is: to make calculate the sum, clicking on the div)

• Html:

<div class="SELECTOR-DIV" style="width: 100px; height: 100px; border: 1px solid red;">
    <input type="checkbox" id="BUBU-1" value="250"> 
    <input type="checkbox" id="BUBU-2" value="750" > 
    <input type="checkbox" id="BUBU-3" value="500"> 
</div>

— <input id="SUM" style="border: none;">

• JavaScript:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.js"></script>

<script type="text/javascript">
    $(document).ready( function() {
        $('#BUBU-1, #BUBU-2, #BUBU-3').change( function() {
             var BOBY1 = Number( $('#BUBU-1:checked').val()||0);
             var BOBY2 = Number( $('#BUBU-2:checked').val()||0);
             var BOBY3 = Number( $('#BUBU-3:checked').val()||0);
             $('#SUM').val( BOBY1 + BOBY2 + BOBY3 );
        });
     });
</script>

<script>
   $('.SELECTOR-DIV').click(function (){
       var checkbox = $(this).find('input[type=checkbox]');
       checkbox.prop("checked", !checkbox.prop("checked"));
       });
   $('input[type=checkbox]').click(function (e){
       e.stopPropagation();
       return true;
       });
</script>