js 实现全选
实现全选功能的方法
使用 JavaScript 实现全选功能通常需要操作复选框（checkbox）的状态。以下是几种常见的实现方式。
通过 DOM 操作实现全选
// 获取全选复选框和子复选框
const selectAllCheckbox = document.getElementById('selectAll');
const itemCheckboxes = document.querySelectorAll('.item-checkbox');
// 全选复选框事件监听
selectAllCheckbox.addEventListener('change', function() {
itemCheckboxes.forEach(checkbox => {
checkbox.checked = this.checked;
});
});
// 子复选框事件监听（用于取消全选状态）
itemCheckboxes.forEach(checkbox => {
checkbox.addEventListener('change', function() {
if (!this.checked) {
selectAllCheckbox.checked = false;
} else {
// 检查是否所有子复选框都被选中
const allChecked = Array.from(itemCheckboxes).every(cb => cb.checked);
selectAllCheckbox.checked = allChecked;
}
});
});使用事件委托优化性能
如果子复选框是动态生成的，可以使用事件委托减少事件监听器的数量。
document.addEventListener('change', function(e) {
if (e.target.id === 'selectAll') {
const checkboxes = document.querySelectorAll('.item-checkbox');
checkboxes.forEach(checkbox => {
checkbox.checked = e.target.checked;
});
}
if (e.target.classList.contains('item-checkbox')) {
const checkboxes = document.querySelectorAll('.item-checkbox');
const allChecked = Array.from(checkboxes).every(cb => cb.checked);
document.getElementById('selectAll').checked = allChecked;
}
});使用 jQuery 实现全选
如果项目中使用了 jQuery，可以简化代码。
$('#selectAll').change(function() {
$('.item-checkbox').prop('checked', this.checked);
});
$('.item-checkbox').change(function() {
$('#selectAll').prop('checked', $('.item-checkbox:checked').length === $('.item-checkbox').length);
});注意事项
- 确保 HTML 结构中全选复选框和子复选框的 ID 或类名正确匹配。
- 动态添加的子复选框需要重新绑定事件或使用事件委托。
- 全选功能通常用于表格、列表等多选项场景，确保 UI 设计清晰。
