Javascript 未选中复选框时，计数器不显示0

我有一组用于分类的复选框。当选择一个类别时，它的相关列表将通过一个ajax调用从数据库中获取，并显示在下表中。在该表中，在每个列表名称旁边，都有一个复选框，供用户根据需要检查尽可能多的列表

现在，我使用计数器来计算第二个复选框集（我称之为boxA）被单击的复选框数

它可以工作，但问题是，每当我选择一个类别时，列表就会出现在boxA中。第二次选择类别时，将显示以前选中的列表列表（注意：只有选中的复选框变为未选中，整个列表仍在那里）。因此，在右边，当未选中复选框且boxA为空时，计数器必须显示0。如何得到这项工作请。下面是我的脚本

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

函数myFunction（）{
var x=document.getElementById（“boxA”）.value；
document.getElementById（“count”）.innerHTML=“您选择：”+x；
}

我试过这样做，但没有成功：

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

函数myFunction（）{
var x=document.getElementById（“boxA”）.value；
如果（$（this）.is（“：checked”））{
document.getElementById（“count”）.innerHTML=“您选择：”+x；
}
否则{
$（（.td.+x）.remove（）；//控件从boxA中移除
}
}

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>

试试这个：

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

您需要根据复选框本身而不是基于表的类来执行此操作。请参阅此链接：-@anantkumarsingh，我将“boxA”和“td”替换为复选框类“sub”…仍然相同。您是否检查了我提供的链接。此外，您还有一个答案，请尝试一下。谢谢。但是，在boxA中，计数器的工作方式是，选中时计数，选中时减少。当我从另一个类别复选框中再选择一个类别时，问题就出现了。boxA中的所有复选框都未选中，但计数器仍显示以前选择的值计数。执行此操作时，需要调用
myFunction（）
onchange
仅在用户更改复选框时运行，而不是在您使用Javascript更改复选框时运行。请给出确切的代码，我在上面添加了用于类别复选框的脚本。或者，当一个新类别添加到boxA中时，有没有办法不取消选中选中的列表？我看不出类别代码在哪里取消选中
子
复选框。
<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>

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