当前位置：首页 > jquery

jquery实现全选

2026-04-08 17:07:08jquery

jQuery实现全选功能

使用jQuery实现全选功能通常涉及监听全选复选框的点击事件，并根据其状态控制其他复选框的选中状态。以下是具体实现方法：

基础实现

HTML结构示例：

<input type="checkbox" id="checkAll">全选
<div class="item-list">
    <input type="checkbox" class="item">选项1
    <input type="checkbox" class="item">选项2
    <input type="checkbox" class="item">选项3
</div>

jQuery代码：

$('#checkAll').click(function() {
    $('.item').prop('checked', this.checked);
});

反向控制全选框

当手动选中所有子选项时，自动勾选全选框；取消任一子选项时，全选框自动取消：

$('.item').click(function() {
    var allChecked = $('.item').length === $('.item:checked').length;
    $('#checkAll').prop('checked', allChecked);
});

处理动态加载内容

对于动态添加的复选框，使用事件委托：

$(document).on('click', '#checkAll', function() {
    $('.item').prop('checked', this.checked);
});

$(document).on('click', '.item', function() {
    var allChecked = $('.item').length === $('.item:checked').length;
    $('#checkAll').prop('checked', allChecked);
});

部分选中状态

当部分子选项被选中时，全选框显示不确定状态：

jquery实现全选

$('.item').click(function() {
    var checkedCount = $('.item:checked').length;
    var totalCount = $('.item').length;

    $('#checkAll').prop('checked', checkedCount === totalCount);
    $('#checkAll').prop('indeterminate', checkedCount > 0 && checkedCount < totalCount);
});