jquery实现全选
jQuery实现全选功能
使用jQuery实现全选功能通常涉及监听全选复选框的点击事件，并根据其状态控制其他复选框的选中状态。以下是具体实现方法：
基础实现
HTML结构示例：
<input type="checkbox" id="checkAll">全选
<div class="item-list">
<input type="checkbox" class="item">选项1
<input type="checkbox" class="item">选项2
<input type="checkbox" class="item">选项3
</div>jQuery代码：
$('#checkAll').click(function() {
$('.item').prop('checked', this.checked);
});反向控制全选框
当手动选中所有子选项时，自动勾选全选框；取消任一子选项时，全选框自动取消：
$('.item').click(function() {
var allChecked = $('.item').length === $('.item:checked').length;
$('#checkAll').prop('checked', allChecked);
});处理动态加载内容
对于动态添加的复选框，使用事件委托：
$(document).on('click', '#checkAll', function() {
$('.item').prop('checked', this.checked);
});
$(document).on('click', '.item', function() {
var allChecked = $('.item').length === $('.item:checked').length;
$('#checkAll').prop('checked', allChecked);
});部分选中状态
当部分子选项被选中时，全选框显示不确定状态：
$('.item').click(function() {
var checkedCount = $('.item:checked').length;
var totalCount = $('.item').length;
$('#checkAll').prop('checked', checkedCount === totalCount);
$('#checkAll').prop('indeterminate', checkedCount > 0 && checkedCount < totalCount);
});注意事项
- 使用
prop()而非attr()操作复选框状态 - 动态内容需使用事件委托
- 不确定状态需通过JavaScript设置，CSS无法直接实现
以上方法可根据实际需求组合使用，适应不同场景的全选功能实现。
