Laravel 8实现按分组独立全选复选框功能遇到问题求助

问题原因 #

你当前的全选逻辑默认选中了页面所有<input>元素，没有做分组范围限制，所以触发任意组的全选都会操作全页面的复选框。

解决方法 #

不需要修改你现有的Blade模板循环逻辑，只需要调整JS的选择范围，从触发事件的全选按钮出发，只选中它所属分组下的子复选框即可，修改后的JS代码如下：

function checkAll(ele) {
    // 找到当前全选按钮所属的分组容器
    const groupContainer = ele.closest('.col-md-6');
    // 只选中当前分组下的所有复选框，排除全选按钮本身
    const checkboxes = groupContainer.querySelectorAll('input[type="checkbox"]:not([id^="selectall_"])');
    
    checkboxes.forEach(checkbox => {
        if (!checkbox.disabled) {
            checkbox.checked = ele.checked;
        }
    });
}

可选优化（更稳妥） #

如果后续页面结构有调整，怕层级遍历出错，可以给每个分组的子复选框加自定义类标识：

• 给所有分组内的普通复选框加class="custom-control-input group-checkbox"
• 修改JS的选择器为groupContainer.querySelectorAll('.group-checkbox')即可，匹配更精准不会误选其他元素。

内容的提问来源于stack exchange，提问作者Alghany Jagad