jeudi 23 septembre 2021

Select all checkboxes by group in laravel 8

I want to make select all but divided by group, all I can do is select all checkboxes, not by group

here's is my blade:

<div class="row">
    @php $i = 1; @endphp
    @foreach($permissions as $group => $permission)
    <div class="col-md-6 ">
        <div class="row mb-3 ">
            <div class="col-md-6">
                <b></b>
            </div>
            <div class="col-md-6 d-flex justify-content-end">
                <div class="custom-control custom-checkbox  custom-control-right">
                    <input id="" type="checkbox" class="custom-control-input" onchange="checkAll(this)" />
                    <label for="" class="custom-control-label">
                        Select All
                    </label>
                </div>
            </div>
        </div>


        @foreach($permission as $p)
        <div class="row ">
            <div class="col-md-6">
                <p></p>
            </div>
            <div class="col-md-6 d-flex justify-content-end">
                <div class="custom-control custom-checkbox  custom-control-right">
                    <input id="ekspor_dashboard" name="permission_id[]" type="checkbox"
                        class="custom-control-input" value="" />
                    <label for="ekspor_dashboard" class="custom-control-label mr-auto"></label>
                </div>
            </div>
        </div>
        @endforeach
    </div>

    @php $i += 1 @endphp
    @endforeach
</div>
</div>

this is the screenshot of the view: enter image description here

I already add select all but it's select all checkboxes, I don't know if I should fix the loop so I can get id from the permission. I just stuck on this.

here's the javascript that I use for the select

<script>
    function checkAll(ele) {
        var checkboxes = document.getElementsByTagName('input');
        if (ele.checked) {
            for (var i = 0; i < checkboxes.length; i++) {
                if (checkboxes[i].type == 'checkbox' && !(checkboxes[i].disabled)) {
                    checkboxes[i].checked = true;
                }
            }
        } else {
            for (var i = 0; i < checkboxes.length; i++) {
                if (checkboxes[i].type == 'checkbox') {
                    checkboxes[i].checked = false;
                }
            }
        }
    }
</script>



Aucun commentaire:

Enregistrer un commentaire