How to total value of checkbox when I check and update value immediately after unchek it using jquery?

$('#r4').change(function() {
      var sum = 0;
        $('#r4:checked').each(function() {
            sum += parseInt($(this).val());
        })

         $(".totcheck").val(sum);

    });  

<script src="http://ift.tt/1oMJErh"></script>
<div class="row">
                                    <div class="col-sm-12" style="background: whitesmoke; margin-bottom: 10px;">
                                      <h3 style="text-align: left">Row 4</h3>
                                        <div class="row" >
                                          <div class="col-sm-12" id="Spirit" style="text-align: left;">
                                                  <li>
                                                    <label class="control control--checkbox">Content A
                                                      <input type="checkbox" id="r4" value="1"/>
                                                      <div class="control__indicator"></div>
                                                    </label>
                                                  </li>
                                                  <li>
                                                    <label class="control control--checkbox"> Content B
                                                      <input type="checkbox" id="r4" value="1"/>
                                                      <div class="control__indicator"></div>
                                                    </label>
                                                  </li>
                                                  <li>
                                                    <label class="control control--checkbox"> Content C
                                                      <input type="checkbox" id="r4" value="1"/>
                                                      <div class="control__indicator"></div>
                                                    </label>
                                                  </li>
                                                  <li>
                                                    <label class="control control--checkbox"> Content D
                                                      <input type="checkbox" id="r4" value="1"/>
                                                      <div class="control__indicator"></div>
                                                    </label>
                                                  </li>
                                          </div>
                                      </div>
                                    </div>
                                  </div>

                                  <div class="row">
                                    <div class="col-sm-12" style="background: #ffdcdc; margin-bottom: 10px;">
                                      <h3 style="text-align: left;">Result</h3>
                                        <div class="row" >
                                          <div class="col-sm-12" style="text-align: left;">
                                                  <p>Total number of statements checked: <input type="number" name="total" disabled class="totcheck" style="float:none; margin-left: 10px;" />
                                                  </p>
                                          </div>
                                      </div>
                                    </div>
                                  </div>

I have a several div with different id of checkbox. I want to accumulate the value of checkbox when I check,and re-update the value if I uncheck a box.

For example: If I checked content A and content B, it will update total value to 2, when I unchecked content B, it automatic update total value to 1.