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

这其实算选中的复选框，并把它写里面<span class="counter"></span>。此代码适用于Firefox，但不适用于Chrome。

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

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

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/

来源

2013-02-06 hawkidoki

你为什么不尝试简单的JavaScript – polin

你能提供一个工作[的jsfiddle（http://jsfiddle.net）演示该问题？ –

看到这篇文章..http：//stackoverflow.com/questions/8011556/how-to-count-check-boxes-using-jquery – Rinku

你可以使用一个函数来更新计数器：

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

并且当一个chec调用这个函数KBOX的状态改变（包括全选复选框）

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

来源

2013-02-06 10:06:57 gabitzish

It works ！非常想你！ – hawkidoki

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

来源

2013-02-06 10:05:50 nbrooks

重要事实：我不想统计我的.counter – hawkidoki

里面的.Select_all复选框'$（'input [type =“checkbox”]：checked'）。not（'。Select_all'）.length' – Paul

对于更新检查状态，请使用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(); 
      }); 
});

演示：Fiddle

来源

2013-02-06 10:07:27

试试这个。

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

来源

2013-02-06 10:09:46 KBN

修改了全部选择处理程序来触发的子类别复选框这样

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

我似乎记得有触发他们一个漂亮的方式平变化的功能，但可以”找不到它

来源

2013-02-06 10:12:16 Ledhund

你能做到这样

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

}); 
});

HTML我使用

<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=""/>

希望这有助于

来源

2013-02-06 10:17:39 Roger

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

回答

相关问题