如果未选中包含一组复选框的框，则无法更新计数器

Question

我有一组类别复选框。单击其中任何一个时，该类别的相关主题列表将列在 table 中，id 为 boxA。

我设置了一个计数器，可以计算在 boxA 中被点击的主题数量，并且效果很好。但是对于下面的场景，它并没有像预期的那样工作！

场景

用户点击说类别A，相关主题将显示在boxA中。用户可以在那里单击任意数量的主题。之后用户决定添加更多类别，因此 he/she 点击说类别 D，相关主题将被列出。这时，我注意到，之前勾选的科目自动取消勾选，我想知道为什么？

和我设置的计数器，当boxA为空时不显示正确的数字。它应该在 none 个复选框被选中时显示 0，但它仍然显示在选择类别 D 之前的检查次数。如何让计数器识别 none 个复选框是否被选中或 boxA 为空。

或者更简单更妥当的解决方案，如何让之前选中的复选框在添加新类别时不丢失选中状态？任何帮助，将不胜感激。提前致谢。

HTML 里面的 cehckboxes boxA

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

脚本

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

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


});
</script>

已编辑主题脚本

function sendtobox(param,param2)
            {
              xmlhttp.onreadystatechange = function() {
              if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
              if (this.responseText !== null) {
                var ajaxElm = document.getElementById('boxA');
                //ajaxElm.innerHTML = this.responseText + ajaxElm.innerHTML; // append in front
                 jQuery(ajaxElm).append(this.responseText);
               }

             }
            }

类别脚本：

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

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>

主题结构

<table class="show small-8 medium-8 large-8 columns small-centered medium-centered large-centered" id="boxA">
                <?php



                  if($last_category != $levels) 
   {
    $last_category = $levels;

    echo '<tr><th class="' . $q .' title">'. $levels;

   }
echo '<table id="inner"><tr><td style="width:50%" class="subject">'. $subjects . '</td><td style="width:5%;"><input type="checkbox" class="sub" name="sub['.$subjects_id.']" id="sub" value="" onchange="myFunction()"><br></td>';
echo'<td style="width:30%;"><span class="test"><input type="textbox" name="rate2['.$subjects_id.']" class="rate2" value=""  placeholder="'.$placeholder.'" id="rate2"></span></td></tr></table>';

if($last_category != $levels)
echo '</th></tr>';
                    ?>      
    </table>

NOW with the updated script, subjects checkboxes doesn't loose it's status and counts well. But when I uncheck the category from boxA the count doesn't decrease!
$(document).on('change', '[id^=sub][type=checkbox]', function () {
    $('#count').text($('[id^=sub][type=checkbox]:checked').length); //How to put a control that will check for category also to increase and decrease the count?
});

Answer 1

如果您取消选中类别，计数器会保留之前的计数，这是因为当您使用 $("th."+selectedval).remove(); 从 table 中删除主题时，您并没有告诉计数器更新。因此，要更新计数器，您需要在删除 table.

中的行后调用 $('#count').text($('[id^=sub][type=checkbox]:checked').length);

虽然更好的解决方案可能是将它封装在一个函数中，以防万一您想要添加到更新计数的任务中：

function updateCount () {
  $('#count').text($('[id^=sub][type=checkbox]:checked').length);
}

// ...

$(document).on('change', '[id^=sub][type=checkbox]', updateCount);

// ...

$("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();
    updateCount();
  }
});

如果未选中包含一组复选框的框，则无法更新计数器

Unable to update counter if box containing group of checkboxes unchecked

javascript

checkbox

jquery

场景

脚本