Как установить и снять все флажки, установив один флажок с помощью alpine js - PullRequest
Новая
       33

Как установить и снять все флажки, установив один флажок с помощью alpine js

1 голос
/ 28 апреля 2020

Я пытаюсь использовать alpine js, чтобы установить или снять все флажки, установив или сняв флажок «Выбрать все», соответственно, используя alpine js. Может ли кто-нибудь указать мне правильное направление ... Спасибо

Ответы [ 2 ]

1 голос
/ 30 апреля 2020

Вы можете попробовать это: 

<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>

Вы можете найти исходный код: здесь

0 голосов
/ 28 апреля 2020 
    <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>
...