Unable to update counter if box containing group of checkboxes unchecked

I have a group of checkboxes for categories. When any of them clicked, a list of related subjects for that category will be listed out in table with id boxA.

I set a counter that can count the number of subjects being clicked inside the boxA and it works well. But for the below scenario it doesn't work as expected!

Scenario

User click say category A,related subjects will be shown in the boxA. The user may click any number of subjects there. After that the user decides to add more category, so he/she clicks say category D, related subjects will be listed out. By this time, I noticed, the previously checked subjects are automatically unchecked which I wonder why?

And the counter I set, not showing the correct figure when the boxA is empty. It supposed to show 0 when none of them checked but it still shows number of checks prior to choosing the category D. How to make the counter recognize if none of the checkboxes is checked or boxA is empty.

Or easier and proper solution would be, how to make the previously checked checkboxes don't loose the checked status when new category added in? Any help would be appreciated. Thanks in advance.

HTML for the cehckboxes inside boxA

<input type="checkbox" class="sub" name="sub['.$subjects_id.']" id="sub" value="" onchange="myFunction()">

Script

<script src="http://ift.tt/Zv5K7g"></script>

<script>
$(document).on('change', '[id^=sub][type=checkbox]', function () {
     if($(this).is(":checked")) {
          $('#count').text($(this).length);
     }


});
</script>