当前位置：首页 > jquery

jquery实现全选

2026-03-16 20:20:46jquery

jquery实现全选

使用 jQuery 实现全选功能

通过 jQuery 可以方便地实现复选框的全选和取消全选功能。以下是几种常见的实现方式：

方法一：基础全选/取消全选

$('#selectAll').change(function() {
    $('input[type="checkbox"]').prop('checked', $(this).prop('checked'));
});

#selectAll 是全选复选框的 ID。
当全选复选框状态改变时，将所有复选框的状态设置为与全选复选框一致。

方法二：动态更新全选状态

$('#selectAll').change(function() {
    $('.item-checkbox').prop('checked', $(this).prop('checked'));
});

$('.item-checkbox').change(function() {
    var allChecked = $('.item-checkbox:checked').length === $('.item-checkbox').length;
    $('#selectAll').prop('checked', allChecked);
});

#selectAll 是全选复选框的 ID。
.item-checkbox 是子复选框的类名。
当子复选框状态改变时，检查是否所有子复选框都被选中，并更新全选复选框状态。

方法三：优化性能的实现

var $selectAll = $('#selectAll');
var $checkboxes = $('.item-checkbox');

$selectAll.on('click', function() {
    $checkboxes.prop('checked', this.checked);
});

$checkboxes.on('change', function() {
    $selectAll.prop('checked', $checkboxes.length === $checkboxes.filter(':checked').length);
});

缓存 jQuery 选择器以提高性能。
使用 filter(':checked') 快速统计被选中的复选框数量。

方法四：表格中的全选功能

$('#selectAll').change(function() {
    $('table tbody input[type="checkbox"]').prop('checked', $(this).prop('checked'));
});

$('table tbody input[type="checkbox"]').change(function() {
    var allChecked = $('table tbody input[type="checkbox"]:checked').length === $('table tbody input[type="checkbox"]').length;
    $('#selectAll').prop('checked', allChecked);
});

针对表格中的复选框实现全选功能。
只操作 tbody 中的复选框，避免影响表头等其他区域的复选框。

注意事项

确保为全选复选框和子复选框设置正确的 ID 或类名。
对于大量复选框，考虑事件委托优化性能：

$(document).on('change', '#selectAll', function() {
    $('.item-checkbox').prop('checked', this.checked);
});

$(document).on('change', '.item-checkbox', function() {
    $('#selectAll').prop('checked', $('.item-checkbox:checked').length === $('.item-checkbox').length);
});