jquery 全选

jQuery 实现全选功能的方法

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

HTML 结构示例

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

方法一：基础全选实现

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

• 通过监听 #selectAll 的点击事件，将 .item 的 checked 属性与全选框状态同步。

方法二：动态响应子项变化

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

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

• 全选框控制子项的同时，子项的选中状态变化也会反过来更新全选框状态。

方法三：优化性能的委托事件

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

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

• 使用事件委托提高性能，适合动态加载的内容。

注意事项

• 使用 prop() 而非 attr() 操作复选框状态，因为 prop() 更准确反映当前属性值。
• 如果复选框是动态生成的，务必使用事件委托或重新绑定事件。

以上方法可根据实际需求选择或组合使用，适用于大多数全选场景。