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/[email protected]/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>