Counter doesnt not show 0 when no checkbox checked

Question

I have a set of checkboxes for category. WHen a category selected, its related list will be fetched from database by an ajax call to appear within a table below. In that table, beside each list name, there's a checkbox for the user to check as many list as they want.

Now I used counter to count how many checboxes are clicked for the second checkbox set or I call it boxA.

It works but problem is, whenever I choose a category, the list appear within boxA. The second time I select a category, the list previously checked list dispappears.(Note: just the checked checkboxes becomes unchecked, the entire list still there). So by right, when no checkboxes are checked and when the boxA is empty ,the counter must show 0. How to get this work please.Below is my script.

<script>
function myFunction() {
    var x = document.getElementById("boxA").value;
    document.getElementById("count").innerHTML = "You selected: " + x;
}
</script>

I tried in this way to no avail:

<script>
function myFunction() {
    var x = document.getElementById("boxA").value;
    if($(this).is(":checked")) {
    document.getElementById("count").innerHTML = "You selected: " + x;
    }
    else {
        $("td."+x).remove();//controls removing from boxA

     }
}
</script>

The html

    <table class="show small-8 medium-8 large-8 columns small-centered medium-centered large-centered" id="boxA">
<!--this is the part fetcehd from db-->
         <tr><th class="<?php echo $q ;?> title"><?php echo $levels;?>
        <table id="inner">
          <tr>
           <td style="width:50%" class="subject"><?php echo $subjects;?></td>
           <td style="width:5%;"><input type="checkbox" class="sub" name="sub['.$subjects_id.']" id="sub" value="" onchange="myFunction()"><br></td>
           <td style="width:30%;"><span class="test"><input type="textbox" name="rate2['.$subjects_id.']" class="rate2" value=""  placeholder="<?php echo $placeholder?>" id="rate2"></span></td>
         </tr>
    </table>';
       <!--this is the part fetcehd from db ends-->
       </th></tr>
     </table>

edited:

The category checkboxes html

 <ul class="box small-block-grid-1 medium-block-grid-2 large-block-grid-2">
                  <li>
                      <div class="level_1">
                       <input type="checkbox" name="level[Primary]" id="level_1" class="level" value="1">
                        <label for="level_1"><span class="level_label">Primary</span></label>
                      </div>

                  </li>
                  <li>
                       <div class="level_2">
                      <input type="checkbox" name="level[Upper Secondary]" id="level_2" class="level" value="3">
                      <label for="level_2"><span class="level_label">Upper&nbsp;Secondary</span></label>
                      </div>
                  </li> 
                  <li>
                      <div class="level_3">
                      <input type="checkbox" name="level[University]" id="level_3" class="level" value="5">
                        <label for="level_3"><span class="level_label">University</span></label>
                      </div>
                  </li>
                  <li>
                      <div class="level_4">
                      <input type="checkbox" name="level[Lower Secondary]" id="level_4" class="level" value="2">
                        <label for="level_4"><span class="level_label">Lower&nbsp;Secondary</span></label>
                      </div>
                  </li>
                  <li>
                      <div class="level_5">
                      <input type="checkbox" name="level[Pre University]" id="level_5" class="level" value="4">
                        <label for="level_5"><span class="level_label">Pre&nbsp;University</span></label>
                      </div>
                  </li>
                  <li>
                      <div class="level_6">
                      <input type="checkbox" name="level[Other]" id="level_6" class="level" value="6">
                        <label for="level_6"><span class="level_label">Other</span></label>
                      </div>

              </ul>

And the script for it

<script>
       $("#slider1").change(function() {
       var value = $(this).val();
       sendtobox(value, $("input[type=checkbox]#level").val());
      });

    $("input[type=checkbox][id^=level]").change(function() {  
     var selectedval = $(this).val();
     if($(this).is(":checked")) {
        var selectedtext = $(this).next().text();
        sendtobox(selectedval, $("#slider1").val());
     }
      else {
        $("th."+selectedval).remove();//controls removing from boxA

     }
    });
</script>

Answer 1

Try this:

function myFunction() {
    var x = $("#boxA .sub:checked").length;
    $("#count").text("You selected: " + x);
}