javascript - jQuery/JavaScript 复选框显示多选和单选中选中的复选框数量

Question

我想显示此代码中选中的复选框的数量。如果我选中全局复选框(全选)，以及当我选中每个复选框时。

下面是我的代码。提前致谢。

$(document).ready(function(){
$('#checkbox-global').click(function(){

    $('.checkbox-group').prop('checked', $(this).is(':checked'));

    if($(this).is(':checked'))
       $('.loaded').show(1000);
    else
      $('.loaded').hide(1000);
});

$('.checkbox-group').change(function(){
    $('#count').text($(".checkbox-group:checked").length); // Show Number of counts of checkboxes
    var checkedLength =  $('.checkbox-group:checked').length;

    if(checkedLength > 0)
      $('.loaded').show(1000);
    else
     $('.loaded').hide(1000);
});

});

   <div class="loaded">RESTORE | DELETE</div>
            <p id="count"></p>

    <input type="checkbox" id="checkbox-global" class="checkbox-group">
    <br>
    <input type="checkbox" class="checkbox-group">
    <input type="checkbox" class="checkbox-group">
    <input type="checkbox" class="checkbox-group">
    <input type="checkbox" class="checkbox-group">
    <input type="checkbox" class="checkbox-group">
    <input type="checkbox" class="checkbox-group">
    <input type="checkbox" class="checkbox-group">

Answer 1

$(document).ready(function() {
$('#checkbox-global').click(function() {

    $('.checkbox-group').prop('checked', $(this).is(':checked'));

    if ($(this).is(':checked'))
        $('.loaded').show(1000);
    else
        $('.loaded').hide(1000);

    $(".checkbox-group").trigger("change");
});
$('.checkbox-group').change(function() {
    $('#count').text($(".checkbox-group:checked").length); // Show Number of counts of checkboxes
    var checkedLength = $('.checkbox-group:checked').length;

    if (checkedLength > 0)
        $('.loaded').show(1000);
    else
        $('.loaded').hide(1000);
});
});

只需添加我已添加到您现有代码中的触发事件即可。希望这对你有用!演示:http://jsfiddle.net/kb4rq36L/