On click check all checkbox in vue js

Question

I Need to check all dynamic checkbox with vue js anytime user will click button. Eg: Click on and all checkbox will be selected/deselected

    var Records = Vue.component('Records', {
    template :  `
                    <button v-on:click="selectAll()" class="btn btn-outline-primary">Select All</button>
                    <table class="table table-striped table-hover">
                        <template v-for="(col_name, key) in form_object_keys">
                        
                            <tr>
                                <th scope="col"></th>
                                <th scope="col" v-for="(col, key) in col_name">{{ col }}</th>
                            </tr>
                            
                        </template>
                        <template v-for="(ps, index) in form_object">
                        
                            <tr>
                                <td>
                                    <div class="form-check">
                                        <input type="checkbox" :value="form_id" />
                                    </div>
                                </td>
                                <td v-for="dato in ps">{{ dato  }}</td>
                            </tr>
                            
                        </template>
                    </table>
                `,
    data() {
        return{
            title: 'Component Title',
            form_id: 10,
            form_object: ['item1', 'item2', 'item3'],
            form_object_keys: ['key1', 'key2', 'key3'],
            selectAll(){
                //
            }
        }
    }
});

I've created "selectAll" function which will be engaged by click button

tauzN · Accepted Answer · 2022-03-19 17:28:31Z

1

I would keep the selected state in the reactive data as well, and bind the checkbox with v-model: Check this

<script setup>
import { ref } from 'vue'
const form_objects = ref([
  {name: "item1", selected: false},
  {name: "item2", selected: false},
  {name: "item3", selected: true},
  {name: "item4", selected: false},
]);
const selectAll = () => {
  form_objects.value.forEach((item) => {item.selected = true})
}
</script>

<template>
  <button v-on:click="selectAll()">Select All</button>
  <div v-for="item in form_objects">
    {{item.name}}
    <input type="checkbox" v-model="item.selected" />
  </div>
</template>

answered Mar 19, 2022 at 17:28

tauzN

7,5072 gold badges22 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

mariobros Over a year ago

I'm trying to integrate your code in my and i Get some error. If I define "const" i get an "Unexpected identifier" error. Is it possible to use my "SelectAll" function to write the logic in there?

Collectives™ on Stack Overflow

On click check all checkbox in vue js

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related