How to check and uncheck all checkboxes by clicking one checkbox using alpine js

Question

i am trying to use alpine js to check or uncheck all the boxes by checking or unchecking the select all checkbox respectively using alpine js, can any one please point me in the right direction... Thanks

Answer 1

    <div x-data="selectBox()">
        <button x-on:click="selectAll">select all</button>
        <button x-on:click="unselectAll">unselect all</button>
        <template x-for="name in allNames">
            <input type="checkbox" :value="name" x-model="checkedNames">
        </template>
        <span x-text="JSON.stringify(checkedNames)"></span>
    </div>

    <script>
        function selectBox() {
            return {
                checkedNames: [],
                allNames: ['bike', 'car', 'boat'],
                selectAll() { this.checkedNames = this.allNames },
                unselectAll() { this.checkedNames = []},
            }
        }
    </script>

Answer 2

Following the answers from Michael Gingras and Najmus Sakib, I arrived at a better solution.

This works for both checking and unchecking individually selected checkboxes.

<input @click="toggleAllCheckboxes()" type="checkbox" class="form-checkbox">


<input id="checkbox1" type="checkbox">
<input id="checkbox2" type="checkbox">
<input id="checkbox3" type="checkbox">
<input id="checkbox4" type="checkbox">

<script>
    function selectAllData() {
        return {
            selectall: false,

            toggleAllCheckboxes() {
                this.selectall = !this.selectall

                checkboxes = document.querySelectorAll('[id^=checkbox]');
                [...checkboxes].map((el) => {
                    el.checked = this.selectall;
                })
            }
        }
    }

</script>

Answer 3

You can try this :

<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v1.10.1/dist/alpine.js" defer></script>

<div x-data="AlpineSelect()">

    <div>
        <input type="checkbox" x-bind:checked="selectall">Select 1 
        <input type="checkbox" x-bind:checked="selectall">Select 2 
        <input type="checkbox" x-bind:checked="selectall">Select 3
    </div>

    <div>
        <input type="checkbox" @click="selectall=!selectall">Select All  
    </div> 

</div>

<script>

    function AlpineSelect(){
        return {
            selectall: false,
        };  
    }

</script>

You can find source code : here

Answer 4

I also noticed a problem in Najmus's answer -- if you click an individual checkbox it does not sync with the selectAll checkbox.

In order to get around this issue, I was able to create a function that searches for all checkboxes with a given Id, and manually sets their checked value to true.

This requires that you set all of the checkboxes you want to be checked with an Id. In the following example I used checkbox{id} where id is the numeric index of the checkbox.

<input x-on:click="selectAllCheckboxes()" type="checkbox">

<input id="checkbox1" type="checkbox">
<input id="checkbox2" type="checkbox">
<input id="checkbox3" type="checkbox">

<script>
    function checked() {
        return {
            selectAllCheckboxes() {
                checkboxes = document.querySelectorAll('[id^=checkbox]');
                [...checkboxes].map((el) => {
                    el.checked = true;
                })
            }
        }
    }
</script>

Answer 5

As none of the previews alternatives worked for me, I had to research and then I found a better solution for it using x-model.

Checkboxes:

<div x-data="checkboxes">
    <input class="item-select-input" type="checkbox" value="001" x-model="itemsCard">
    <input class="item-select-input" type="checkbox" value="002" x-model="itemsCard">
    <input class="item-select-input" type="checkbox" value="003" x-model="itemsCard">
</div>

Select all input:

<input class="form-check-input" type="checkbox" x-on:click="selectAllCheckboxes">

Alpine Function:

<script>
    document.addEventListener('alpine:init', () => {
        Alpine.data('checkboxes', () => ({
            selectAll: false,
            itemsCard: [],

            selectAllCheckboxes() {
                this.selectAll = !this.selectAll

                let checkboxes = document.querySelectorAll('.item-select-input');
                let allValues = [];

                [...checkboxes].map((el) => {
                    allValues.push(el.value)

                    this.itemsCard = this.selectAll ? allValues : []
                })
            }
        }))
    })
</script>

Answer 6

My Simple Solution.

Select All:

<a href="javascript:void(0);" x-on:click="toggleAllCheckboxes('permissions[]')" class="btn btn-sm btn-dark">Select All</a>

Checkboxes:

<input type="checkbox" name="permissions[]">

Javascript function:

function toggleAllCheckboxes(elementName) {
        const checkboxes = document.getElementsByName(elementName);
        checkboxes.forEach(function (ele) {
            ele.toggleAttribute('checked');
        });
    }