Cách đếm từng hộp kiểm đã chọn

Question

Đây là mã của tôi:

Hộp kiểm tra thực sự được đánh dấu và ghi vào bên trong <span class="counter"></span>. Mã này hoạt động trên Firefox, nhưng không hoạt động trên Chrome.

Trên Chrome, .select_all chọn tất cả các hộp kiểm tôi muốn nhưng không cập nhật bộ đếm. Trên thực tế, bộ đếm được cập nhật khi tôi bỏ chọn .select_all, điều này thật lạ.

SỰ THẬT QUAN TRỌNG: Tôi không muốn đếm các hộp kiểm bên .Select_all .counter tôi

jQuery(document).ready(function($){ 

$(function() { 
    $('#general i .counter').text(' '); 

    var generallen = $("#general-content input[name='wpmm[]']:checked").length; 
    if(generallen>0){$("#general i .counter").text('('+generallen+')');}else{$("#general i .counter").text(' ');} 
}) 

$("#general-content input:checkbox").on("change", function() { 
    var len = $("#general-content input[name='wpmm[]']:checked").length; 
    if(len>0){$("#general i .counter").text('('+len+')');}else{$("#general i .counter").text(' ');} 
}); 


$(function() { 
    $('.select_all').change(function() { 
     var checkthis = $(this); 
     var checkboxes = $(this).parent().next('ul').find("input[name='wpmm[]']"); 

     if(checkthis.is(':checked')) { 
      checkboxes.attr('checked', true); 
     } else { 
      checkboxes.attr('checked', false); 
     } 
    }); 
}); 

}); 

EDIT: Đây là một tài liệu ví dụ về mã: http://jsfiddle.net/8PVDy/1/

Answer 1

Bạn có thể sử dụng chức năng để cập nhật bộ đếm:

function updateCounter() { 
    var len = $("#general-content input[name='wpmm[]']:checked").length; 
    if(len>0){$("#general i .counter").text('('+len+')');}else{$("#general i .counter").text(' ');} 
} 

và gọi hàm này khi chec nhà nước kbox được thay đổi (bao gồm các hộp kiểm SelectAll)

Dưới đây là một jsFiddle Cập nhật: http://jsfiddle.net/8PVDy/4/

Answer 2

$('input[type="checkbox"]:checked').length 

Answer 3

Để cập nhật tình trạng kiểm tra sử dụng jQuery.prop() chức năng

Code:

$(function(){ 
    $('#general i .counter').text(' '); 

    var fnUpdateCount = function() { 
     var generallen = $("#general-content input[name='wpmm[]']:checked").length; 
     console.log(generallen,$("#general i .counter")) 
     if (generallen > 0) { 
      $("#general i .counter").text('(' + generallen + ')'); 
     } else { 
      $("#general i .counter").text(' '); 
     } 
    }; 

    $("#general-content input:checkbox").on("change", function() { 
       fnUpdateCount(); 
      }); 

    $('.select_all').change(function() { 
       var checkthis = $(this); 
       var checkboxes = $("#general-content input:checkbox"); 

       if (checkthis.is(':checked')) { 
        checkboxes.prop('checked', true); 
       } else { 
        checkboxes.prop('checked', false); 
       } 
       fnUpdateCount(); 
      }); 
}); 

Demo: Fiddle

Answer 4

Hãy thử điều này.

$('.select_all').change(function() { 
var num = $(this).find("input[name='wpmm[]']:checked").length; 
$("#general .counter").html(num); 
}); 

Answer 5

Modified select all-handler để kích hoạt chức năng onchange cho các hộp kiểm tiểu thể loại như thế này

$(function() { 
    $('.select_all').change(function() { 
     var checkthis = $(this); 
     var checkboxes = $(this).parent().next('ul').find("input[name='wpmm[]']"); 

     if(checkthis.is(':checked')) { 
      checkboxes.attr('checked', true); 
     } else { 
      checkboxes.attr('checked', false); 
     } 
     // make sure to trigger the onchange behaviour for the checkboxes 
     $("#general-content input:checkbox").change(); 
    }); 
}) 

tôi dường như nhớ rằng có một cách đẹp hơn để kích hoạt chúng, nhưng có thể' t thấy nó

Answer 6

bạn có thể làm theo cách này

$(document).ready(function(){ 
$('input[type="checkbox"]').click(function(){ 
    alert($('.test:checked').length); 

}); 
}); 

HTML i sử dụng

<input type="checkbox" name="test" class="test" value=""/> 
<input type="checkbox" name="test" class="test" value=""/> 
<input type="checkbox" name="test" class="test" value=""/> 
<input type="checkbox" name="checkAll" class="checkAll" value=""/> 

Hope this helps