只计数一次复选框类

count checkbox class only once

本文关键字：一次 复选框      更新时间：2023-09-26

我已经写了这个脚本来检查当复选框与类"A"， "B"answers"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>

您已经尝试过jquery的独特方法了吗?见http://api.jquery.com/jQuery.unique/

不需要迭代的临时逻辑，并在内部计算的总数上工作，

演示:

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);
    }
});

如果您对上述逻辑有任何问题，请使用.each查看此版本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);
演示:

http://jsfiddle.net/MCKtA/

用这个…

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

相关文章：