当前位置：首页 > jquery

jquery全选全不选

2026-03-17 07:10:05jquery

jQuery 实现全选/全不选功能

通过 jQuery 可以轻松实现复选框的全选和全不选功能。以下是常见的实现方法：

HTML 结构示例

<input type="checkbox" id="checkAll"> 全选/全不选
<br>
<input type="checkbox" class="item"> 选项1
<input type="checkbox" class="item"> 选项2
<input type="checkbox" class="item"> 选项3

方法1：基础实现

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

方法2：带反向检测

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

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

方法3：使用 change 事件

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

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

注意事项

使用 prop() 方法而不是 attr() 来操作复选框状态
全选框和选项框需要有明确的类或ID区分
反向检测确保当手动取消某些选项时，全选框状态相应更新

扩展功能

jquery全选全不选

// 部分选中时全选框显示不确定状态
$('.item').change(function() {
    var allChecked = $('.item:checked').length === $('.item').length;
    var someChecked = $('.item:checked').length > 0;

    $('#checkAll').prop('checked', allChecked);
    $('#checkAll').prop('indeterminate', someChecked && !allChecked);
});

以上代码可以根据实际需求进行调整，适应不同的应用场景和UI设计。