Laravel Active checkbox father and child-CodePudding

I'm tying to active child checkbox when I active checkbox father

<table class="table table-report mt-2">
<!-- checkbox father -->
<div class="grid grid-cols-5">
    <div
        wire:loading.class="pointer-events-none"
        class="text-center tooltip"
        tooltip="{{ __('Pay to All') }}">
            <p> <strong> {{ __('Active All') }} </strong> </p>
            <input
                wire:loading.attr="disabled"
                id="active_all"
                type="checkbox"
                class="input input--switch "
            >
    </div>
</div>

<thead>
<tr>
    <th class="text-center">{{ __('Pay Wage') }}</th>
</tr>
</thead>
<tbody>
<!-- checkbox children -->
@foreach($this->workers as $key => $worker)
    <tr class="intro-x" wire:key="worker-{{ $worker->id }}">
        <td wire:loading.class="pointer-events-none"
            class="text-center tooltip"
            tooltip="{{ __('Pay to Worker') }}">
            <input
                wire:loading.attr="disabled"
                id="input-wagesheet-worker-{{ $worker->id }}"
                name="select-check"
                wire:change="changeIsWagesheetWorker({{ $worker->id }})"
                @if(isset($worker->wagesheet->id))
                checked
                @endif
                type="checkbox"
                
            >
        </td>
    </tr>
@endforeach
</tbody>
</table>

section script

@section('script')
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">

    $('#active_all').change(function() {
        console.log(this.active_all.value);
        if ($(this).prop('checked')) {
            $('.checar').prop('checked', true);
        } else {
            $('.checar').prop('checked', false);
        }
    });

    </script>
@endsection

I just want is if I click on checkbox father, all children checkbox Active or disabled.

My question is How I can active checkbox children when checkBox father is Active? and How I can disabled checkbox children when father is disabled or inactive? I'm using ajax to work it, but this don't work to me, why???

CodePudding user response：

this is your main checkbox, and you can wrap it to a property, eg. $checkAll

<input wire:model="checkAll" wire:loading.attr="disabled" id="active_all" type="checkbox" class="input input--switch">

// in component

public $checkAll = false;

then for the child checkboxes, you can add for this property change to activate or disable it.

<input          {{ ! $checkAll ? 'disabled' : '' }}
                wire:loading.attr="disabled"
                id="input-wagesheet-worker-{{ $worker->id }}"
                name="select-check"
                wire:change="changeIsWagesheetWorker({{ $worker->id }})"
                @if(isset($worker->wagesheet->id))
                checked
                @endif
                type="checkbox"
                class="input input--switch checar"
            >