javascript - 未选中复选框时计数器不显示0

我有一组类别复选框。如果选择了一个类别，则将通过ajax调用从数据库中获取其相关列表，以显示在下表中。在该表中，每个列表名称旁边都有一个复选框，供用户检查所需数量的列表。

现在，我使用计数器来计算第二个复选框集单击了多少个复选框，或者称其为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>

最佳答案

尝试这个：

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

关于javascript - 未选中复选框时计数器不显示0，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/29995715/