jquery 全选

jQuery 全选实现方法

使用jQuery实现全选功能通常涉及监听复选框的点击事件，并根据全选按钮的状态来设置其他复选框的状态。

HTML结构示例

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

jQuery代码实现

监听全选复选框的点击事件，当全选被勾选时，所有子选项也被勾选；取消全选时，所有子选项也被取消。

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

反向联动实现

如果需要子选项全部选中时自动勾选全选按钮，可以监听子选项的变化事件。

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

注意事项

• 确保jQuery库已正确引入。
• 使用prop()方法而非attr()来操作复选框的选中状态，因为prop()更可靠。
• 如果页面内容是动态加载的，需要使用事件委托来绑定事件。

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