如何计算每个选中的复选框

这是我的代码：

它实际上计算了选中的复选框并将其写入 。 此代码适用于Firefox，但不适用于Chrome。

在Chrome上，.select_all会选中我想要的所有复选框，但不会更新计数器。 实际上，当我取消选中.select_all时，计数器会更新，这很奇怪。

重要事实：我不想计算我的.counter中的.Select_all复选框

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

编辑：这是代码的示例文档： http ： //jsfiddle.net/8PVDy/1/

Answer 1

您可以使用函数更新计数器：

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

当复选框的状态改变时调用此函数（包括selectAll复选框）

这是一个更新的jsFiddle： http ： //jsfiddle.net/8PVDy/4/

Answer 2

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

Answer 3

你可以这样做

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

我使用的HTML

希望这可以帮助

Answer 4

要更新已检查的状态，请使用jQuery.prop（）函数

码：

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

演示： 小提琴

Answer 5

试试这个。

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

Answer 6

修改了select all-handler以触发像这样的子类复选框的onchange函数

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

我似乎记得有一种更漂亮的方式来触发它们，但找不到它