当前位置：首页 > jquery

jquery全选

2026-01-16 14:56:25jquery

jQuery实现全选功能的方法

使用jQuery实现全选功能可以通过监听复选框的点击事件，动态控制其他复选框的状态。以下是几种常见实现方式：

jquery全选

基础全选/取消全选

通过监听全选复选框的change事件，设置其他复选框的选中状态与其一致：

jquery全选

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

联动状态更新

当子选项全部选中时自动勾选全选复选框，部分选中时保持全选复选框的中间状态：

$('.item-checkbox').change(function() {
    var allChecked = $('.item-checkbox:checked').length === $('.item-checkbox').length;
    var anyChecked = $('.item-checkbox:checked').length > 0;

    $('#selectAll').prop('checked', allChecked);
    $('#selectAll').prop('indeterminate', anyChecked && !allChecked);
});

表格行全选示例

针对表格场景的全选实现，同时可添加行高亮效果：

$('#selectAll').click(function() {
    var isChecked = $(this).is(':checked');
    $('.row-checkbox').prop('checked', isChecked);
    $('table tr').toggleClass('selected', isChecked);
});

$('.row-checkbox').click(function() {
    $(this).closest('tr').toggleClass('selected', $(this).is(':checked'));
});

注意事项

使用prop()而非attr()操作复选框状态，因为prop()能正确反映动态变化
事件委托适用于动态生成的元素：$(document).on('change', '.item-checkbox', function() {...})
对于大量DOM操作，建议使用事件委托提高性能

完整示例代码

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

<script>
$(function() {
    // 全选控制
    $('#selectAll').change(function() {
        $('.item-checkbox').prop('checked', this.checked);
    });

    // 子选项影响全选状态
    $('.item-checkbox').change(function() {
        var allChecked = $('.item-checkbox').length === $('.item-checkbox:checked').length;
        $('#selectAll').prop('checked', allChecked);
    });
});
</script>