Laravel父复选框联动激活/禁用子复选框实现问题咨询

• script标签语法错误：带有src属性的script标签内部不能编写自定义JS代码，浏览器会直接忽略标签内的内容、只加载外部引入资源，你将jQuery引入和联动逻辑写在了同一个script标签中，导致联动代码根本没有被执行。
• 事件绑定时机问题：项目使用了Livewire框架，页面元素是异步渲染的，直接绑定change事件时，#active_all或者子复选框可能还没渲染到DOM上，导致事件绑定失效。
• Livewire状态不同步：原有代码只修改了子复选框的checked属性，没有触发子复选框的change事件，Livewire绑定的wire:change逻辑不会执行，会出现后端状态和前端显示不一致的问题。
• HTML结构不规范：你把父复选框的div直接放在了table标签内部，不符合HTML语法规范，浏览器可能会自动把这个div移到table外部，导致#active_all选择器匹配失败。

首先把父复选框的整块div挪到<table>标签外面，避免DOM解析异常，再修改脚本部分代码如下：

@section('script')
<!-- 单独写引入jQuery的script标签 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- 自定义逻辑写在独立的script标签中 -->
<script>
// 用事件委托适配Livewire动态渲染的元素
$(document).on('change', '#active_all', function() {
    const isChecked = $(this).prop('checked');
    $('.checar').each(function() {
        $(this).prop('checked', isChecked);
        // 手动触发change事件，同步Livewire后端状态
        $(this).trigger('change');
    });
});

// 可选补充逻辑：子复选框全选时自动勾选父复选框，取消任意子复选框时自动取消父复选框勾选
$(document).on('change', '.checar', function() {
    const total = $('.checar').length;
    const checkedCount = $('.checar:checked').length;
    $('#active_all').prop('checked', total === checkedCount);
});
</script>
@endsection

内容的提问来源于stack exchange，提问作者Jonh wick