没有选中复选框时，计数器不显示0

Question

我有一组复选框用于分类。当选择一个类别时，其相关列表将通过ajax调用从数据库中获取，以显示在下面的表格中。在该表中，除了每个列表名称之外，还有一个用于检查任意多个列表的复选框。

现在我用计数器来计算第二个复选框集有多少个checboxes被点击或者我称之为boxA。

它的工作原理，但问题是，每当我选择一个类别，列表出现在boxA。第二次选择一个类别时，先前检查过的列表将被忽略（注意：只是选中的复选框变为未选中，整个列表仍然存在）。所以右边没有选中复选框，当boxA为空时，计数器必须显示0.请问如何获得这项工作。以下是我的脚本。

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

我想以这种方式来无济于事：

<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> 

的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> 

编辑：

类别复选框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> 

和脚本它

<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

试试这个：你需要

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