Javascript - check/uncheck checkbox after summing diferent inputs

I have a ‘parent’ <div>, and ‘child’ divs which are shown after clicking parent <div>. All divs have <checkboxes> and <input> to put quantity.

Parent <checkbox> checks when at least one child <checkbox> is checked.

When child <checkbox> is checked/unchecked the quantity in <input> is automatically changed into ‘1’ or ‘’.

Parent quantity <input> is disabled and it supposed to show the sum of all children quantities.

I have two problems.

First, the summing script works fine when you enter the quantity yourself, however when the quantity appears/disappears itself (after checking/unchecking the child <checkbox>) the summing script does not react on such change.

Secondly I wasn’t able to uncheck the parent <checkbox> when all child checkboxes are unchecked. However I’m assuming if the summing script will start working properly I will be able to bind the parent <checkbox> with the sum (if (sum> 0){ $('#checkbox0').prop('checked', true);}else{$('#checkbox0').prop('checked', false);}

Html:

    <div class="divCell" id="click1">
    <div class="checkbox_div" style='pointer-events:none;'>
      <input type="checkbox" id="checkbox0">
    </div>   
    <div class="div_name_divcell">Parent - click to open</div>
    <div class="div_quantity_divcell">
    <input type="text" name="parent_1" class="quantity_class_parent_1" id="quantity_parent_1" size="1" maxlength="3" onkeypress="return numbersonly(this, event)" disabled="disabled">
   </div>
</div>
<div id="hidden1" style="display: none;">
 <div class="divCell" id="child_click1">
    <div class="checkbox_div">
      <input type="checkbox" id="checkbox1">
    </div>   
    <div class="div_name_divcell">Child1</div>
    <div class="div_quantity_divcell">
      <input type="text" name="child_1" class="quantity_class_child" id="quantity_child_1" size="1" maxlength="3" onkeypress="return numbersonly(this, event)">
   </div>
 </div>

  <div class="divCell" id="child_click2">
    <div class="checkbox_div">
      <input type="checkbox" id="checkbox2">
    </div>   
    <div class="div_name_divcell">Child2</div>
    <div class="div_quantity_divcell">
      <input type="text" name="child_1" class="quantity_class_child" id="quantity_child_2" size="1" maxlength="3" onkeypress="return numbersonly(this, event)">
   </div>
 </div>
</div>

Css:

.divCell {width: 500px;height: 35px;margin: 2px 0;display: inline-block;background-color: #D4F78F;}
.div_quantity_divcell{float:right; padding:9px 1px 0 0}
.checkbox_div {width: 25px;position: relative;margin: 5px;float: left;}
.div_name_divcell {line-height: 35px;width: auto;float: left;}

JavaScript:

    $(document).ready( function() {
        event.preventDefault();
        $('#checkbox1').click(function() {
        if(this.checked){     
            $('#checkbox0').prop('checked', this.checked); 
            $('#quantity_child_1').val('1')     
        }else{ 
            $('#quantity_child_1').val('')
        //$('#checkbox0').prop('checked', false);
        }});
        $('#quantity_child_1').keyup(function(){
            $('#checkbox1').prop('checked', this.value > 0);
        $('#checkbox0').prop('checked', true);
        })
      //second child
        $('#checkbox2').click(function() {
        if(this.checked){     
            $('#checkbox0').prop('checked', this.checked); 
            $('#quantity_child_2').val('1')     
        }else{ 
            $('#quantity_child_2').val('') 
        //$('#checkbox0').prop('checked', false);
        }});
        $('#quantity_child_2').keyup(function(){
            $('#checkbox2').prop('checked', this.value > 0);
        $('#checkbox0').prop('checked', true);
        })
    });
    // suming script

    $(document).on('change', '.quantity_class_child', function(){
        var sum = 0;
        $('.quantity_class_child').each(function(){
        sum += +$(this).val();
        });

        $('#quantity_parent_1').val(sum);
    });

//opening script
$(document).ready(function() {
  $('#click1').click(function() {
        if ($('#hidden1').is(':hidden')) {
       $('#hidden1').show(500);
    } else {
       $('#hidden1').hide(500);
    }
  });
});

JSFiddle: http://ift.tt/29fkZJi