jquery全选反选

jQuery实现全选/反选功能

使用jQuery可以轻松实现全选和反选功能，以下是具体实现方法：

基础全选功能

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

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

反选功能实现

反选需要遍历所有目标复选框并反转其选中状态：

$('#reverseSelect').click(function() {
    $('.item-checkbox').each(function() {
        $(this).prop('checked', !$(this).prop('checked'));
    });
});

动态全选状态

当子复选框状态变化时，自动更新全选复选框的状态：

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

完整示例代码

<input type="checkbox" id="selectAll">全选
<button id="reverseSelect">反选</button>

<div class="item-list">
    <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);
    });

    // 反选功能
    $('#reverseSelect').click(function() {
        $('.item-checkbox').each(function() {
            $(this).prop('checked', !$(this).prop('checked'));
        });
        updateSelectAll();
    });

    // 动态更新全选状态
    $('.item-checkbox').change(function() {
        updateSelectAll();
    });

    function updateSelectAll() {
        var allChecked = $('.item-checkbox').length === $('.item-checkbox:checked').length;
        $('#selectAll').prop('checked', allChecked);
    }
});
</script>

注意事项

• 确保所有目标复选框具有相同的class或选择器特征
• 使用prop()方法而不是attr()来操作checked属性
• 反选操作通常绑定到按钮点击事件而非复选框change事件
• 考虑添加防抖处理当复选框数量较多时

这些方法可以灵活应用到表格行选择、批量操作等场景中，根据实际需求调整选择器和事件绑定方式即可。