当前位置：首页 > jquery

jquery全选

2026-04-08 01:29:50jquery

jQuery 实现全选功能的方法

使用 jQuery 实现全选功能通常涉及监听全选复选框的点击事件，并根据其状态设置其他复选框的选中状态。以下是几种常见的实现方式：

基础全选功能

监听全选复选框的 change 事件，通过 prop() 方法设置其他复选框的选中状态。

jquery全选

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

反选功能扩展

在全选基础上增加反选逻辑，当部分复选框未选中时，取消全选复选框的选中状态。

jquery全选

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

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

动态生成复选框的处理

对于动态生成的复选框，使用事件委托确保事件绑定有效。

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

$(document).on('change', '.itemCheckbox', function() {
    var allChecked = $('.itemCheckbox').length === $('.itemCheckbox:checked').length;
    $('#selectAll').prop('checked', allChecked);
});

表格中的全选功能

在表格中实现全选功能，通常针对某一列的复选框进行操作。

$('#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"]').length === $('table tbody input[type="checkbox"]:checked').length;
    $('#selectAll').prop('checked', allChecked);
});