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

没有迭代的简易逻辑，可以处理在ready中计算的总数，

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

如果您对上述逻辑有任何问题，请使用.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);

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

只计算一次复选框类

3 个答案: