i want to check all my checkbox from one checkbox using laravel 8 mvc

user_11823551 0
Viewed 186

I want to check the first checkbox that have the id checkAll and it will check all my checkboxes and when I unchecked it, it will unchecked all too.

My blade index.blade.php:

<body>
    <table class="table">
        <thead>
            <tr>
                <th scope="col">
                    <input type="checkbox" id="checkAll">
                </th>
                <th scope="col">id</th>
                <th scope="col">title</th>
                <th scope="col">Paragraph</th>
            </tr>
        </thead>
        @foreach ($categories as $categorie)
            <tbody>
                <tr>
                    <td>
                        <input type="checkbox" name="checkOne" value="{{$categorie->id}}">
                    </td>
                    <th scope="row">{{ $categorie->id }}</th>
                    <td>{{ $categorie->Title }}</td>
                    <td>{{ $categorie->Paragraph }}</td>
                    <form action={{ route('categorie.destroy', $categorie->id) }} method="POST">
                        @csrf
                        @method('DELETE')
                        <td>
                            <button class="btn btn-danger" type="submit">
                                delete
                            </button>
                    </form>
                    <button class="btn btn-warning"> <a href={{ route('edit', $categorie->id) }}>edit</a> </button>
                    </td>
                </tr>
            </tbody>
        @endforeach
    </table>

</body>
laravel-blade laravel-8 laravel php
2 Answers

If you have multiple checkboxes with the same name then use array in your loop, as below:

<input type="checkbox" name="checkOne[]" value="{{ $categorie->id }}">

Now you need to use jQuery to select/unselect checkboxes, use below code:

$('#checkAll').change(function() { // main checkbox id
    $('input[name="checkOne[]"]').prop('checked', $(this).is(":checked"));
});
user_62468180

Try this code -

<script type='text/javascript'>
    function checkAll(e) {
        const checkboxes = document.getElementsByName('checkOne');
        for (let i = 0; i < checkboxes.length; i++) { 
            checkboxes[i].checked = e.checked;
        }
    }
</script>
user_148517720
Related