複選框計數器因條件邏輯插件而復位

Question

我有一個「歌曲請求」表單，用於統計從每個流派中選擇的每個複選框。該值將添加到固定在網站底部的「＃SONGS PICKED」元素。它完美地工作，直到我添加忍者形式條件邏輯：http://911dj.smallmind.co/song-requests/

當您從「選擇您的歌曲從下面的流派：」選擇字段，相應的清單出現，和前一個（如果是選中）從HTML中刪除。

當您從當前/新複選框列表中選擇複選框時，這將導致計數器從1開始。如果您切換回以前的流派，它會重新選擇該列表的計數位置。

下面是我的jQuery：

jQuery(document).ready(function() { 
    function updateCounter() { 
     var len = $("input[type='checkbox']:checked").length; 
     if (len > 0) { 
      $(".counter").text('' + len + ''); 
     } else { 
      $(".counter").text('0'); 
     } 
    if (len == 1) { 
      $(".multi").text(''); 
     } else { 
      $(".multi").text('s'); 
     } 
    } 
    jQuery(document).on("change","input[type='checkbox']", function() { 
     updateCounter(); 
    }); 
}); 

我真的無法弄清楚如何在價值鎖定。任何幫助將不勝感激，因爲這個網站已經完成了99.99％，並且在我啓動之前需要這個修復。提前謝謝！

Answer 1

請試試這個代碼可以將它幫助您更好地

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

<input type="checkbox" name="song" value="song1">song1<br> 
<input type="checkbox" name="song" value="song2">song2<br> 
<input type="checkbox" name="song" value="song3">song1<br> 
<input type="checkbox" name="song" value="song4">song2<br> 
<p class="counter">0</p> 
    <script type="text/javascript"> 
    jQuery(document).ready(function() { 
    function updateCounter() { 
     var len = $("input[type='checkbox']:checked").length; 
     if (len > 0) { 
      $(".counter").text('' + len + ''); 
     } else { 
      $(".counter").text('0'); 
     } 
    if (len == 1) { 
      $(".multi").text(''); 
     } else { 
      $(".multi").text('s'); 
     } 
    } 
    jQuery(document).on("change","input[type='checkbox']", function() { 
     updateCounter(); 
    }); 
});  
</script>