count checkbox class only once

Question

Я написал этот скрипт, чтобы проверить, когда отмечены флажки с классами «A», «B» и «C», а затем добавьте их вместе (эти классы назначаются нескольким флажкам). однако, я хочу только считать один экземпляр из них проверенным, тогда как этот скрипт подсчитывает их каждый раз, когда флажки с этими значениями проверяются. как я могу изменить его, чтобы считать только один раз?

JQuery:

$(function() { 
     $('#product-counter .counter').text('0'); 

     var total = $("#search-id-checkboxes .A:checked").length + $("#search-id-checkboxes .B:checked").length + $("#search-id-checkboxes .C:checked").length; 
     if(total>0){$("#product-counter .counter").text(total);} 
     else{$("#product-counter .counter").text('0');} 
    }) 

    function updateCounter() { 
     var len = $("#search-id-checkboxes .A:checked").length + $("#search-id-checkboxes .B:checked").length + $("#search-id-checkboxes .C:checked").length; 
     if(len>0){$("#product-counter .counter").text(len);} 
     else{$("#product-counter .counter").text('0');} 
    } 

    $("#search-id-checkboxes input:checkbox").on("change", function() { 
     updateCounter(); 
    }); 

HTML:

<div id="search-id-checkboxes"> 
<input type="checkbox" class="A"/> A<br /> 
<input type="checkbox" class="A" /> A<br /> 
<input type="checkbox" class="B" /> B<br /> 
<input type="checkbox" class="B" /> B<br /> 
<input type="checkbox" class="C" /> C<br /> 
<input type="checkbox" class="C" /> C<br /> 
</div> 

Answer 1

вы уже пробовали уникальный метод JQuery? См http://api.jquery.com/jQuery.unique/

Answer 2

импровизированного логики не имеют итерацию и работать по общей, которое было вычислено внутри готово,

DEMO:http://jsfiddle.net/MQhyt/

Полная функция:

$(function() { 
    $('#product-counter .counter').text('0'); 

    var inArray = []; 
    $("#search-id-checkboxes :checkbox").each(function() { 
     if (this.checked && $.inArray(this.className, inArray) == -1) { 
      inArray.push(this.className); 
     } 
    }); 

    var total = inArray.length; 

    if (total > 0) { 
     $("#product-counter .counter").text(total); 
    } else { 
     $("#product-counter .counter").text('0'); 
    } 
    $("#search-id-checkboxes input:checkbox").on("change", function() { 
     updateCounter.call(this); 
    }); 

    function updateCounter() { 
     var elClass = this.className; 
     var $el = $('#search-id-checkboxes .' + elClass + ':checked'); 

     if ($el.length == 1 && this.checked) { 
      total += 1; 
     } else if ($el.length == 0) { 
      total -= 1; 
     } 

     $("#product-counter .counter").text(total); 
    } 
}); 

Ознакомьтесь с этой версией http://jsfiddle.net/WLmtq/, используя., если у вас есть проблемы с вышеуказанной логикой.

---

Может быть, вы хотите, чтобы проверить, как показано ниже,

var len = ($("#search-id-checkboxes .A").is(":checked") ? 1 : 0) + 
      ($("#search-id-checkboxes .B").is(":checked") ? 1 : 0) + 
      ($("#search-id-checkboxes .C").is(":checked") ? 1 : 0); 

DEMO:http://jsfiddle.net/MCKtA/

Answer 3

Используйте этот ...

var total = 0; 
$(':checkbox').on('change', function (e) { 
    var a = $(this).prop('class'); 
    if($("." + a + ':checked').length == 1 && $(this).is(':checked')){ 
     total +=1; 
    } 
    if($("." + a + ':checked').length == 0){ 
     total-=1; 
    } 
    $('#product-counter .counter').text(total); 
}); 

Смотрите эту DEMO