jQuery / JavaScript 复选框显示多个和单个选择中选中的复选框的数量

jQuery / JavaScript checkbox display the number of checked checkboxes in multiple and single selection

本文关键字：复选框 选择 单个 JavaScript 显示 jQuery      更新时间：2023-09-26

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

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

$(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">

$(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/

试试这个：

function updateCheckedCount() {
    $("#count").html($(".checkbox-group:not(#checkbox-global):checked").length);
}
$("#checkbox-global").on("change", function() {
    if($(this).is(":checked")) {
        $(".checkbox-group").attr("checked", "checked");
    } else {
        $(".checkbox-group").removeAttr("checked");
    }
    updateCheckedCount();
});
$(".checkbox-group").on("change", function() {
    if(!$("#checkbox-global").is(":checked") && $(".checkbox-group:not(#checkbox-global)").length == $(".checkbox-group:not(#checkbox-global):checked").length) {
        $("#checkbox-global").attr("checked", "checked");
    }
    updateCheckedCount();
});
updateCheckedCount();

这是一个想法，你应该优化这个代码。例如，最好更改 #checkbox 全局类复选框组，以避免在选择时发生冲突。

相关文章：