javascript - How to check all checkbox on checking one checkbox in vuetify? - Stack Overflow

admin管理员组

文章数量:1279213

I have created 5 checkboxes dynamically through for loop

<v-checkbox 
    v-model="selectAll"
    label="Select All"
    @change="select_All($event)"
></v-checkbox>

<template v-for="n in 5">
    <v-checkbox 
       v-model="selected[n]"
    ></v-checkbox>
</template>

In script

data(){
    return{
        selected:[],
                selectAll: false
    }
},
methods:{
    select_All(e){
        if(e == true)
        {
            // check all the checkbox
        } else {
            // uncheck all the checkbox
        }
    }
}

This is how I have created checkboxes dynamically,(if you have any better suggestion for how to create dynamic checkbox please tell me) Now I have a checkbox above all and if I click(check) on that checkbox all the below checkbox should be selected or vice-versa.

I have created 5 checkboxes dynamically through for loop

<v-checkbox 
    v-model="selectAll"
    label="Select All"
    @change="select_All($event)"
></v-checkbox>

<template v-for="n in 5">
    <v-checkbox 
       v-model="selected[n]"
    ></v-checkbox>
</template>

In script

data(){
    return{
        selected:[],
                selectAll: false
    }
},
methods:{
    select_All(e){
        if(e == true)
        {
            // check all the checkbox
        } else {
            // uncheck all the checkbox
        }
    }
}

This is how I have created checkboxes dynamically,(if you have any better suggestion for how to create dynamic checkbox please tell me) Now I have a checkbox above all and if I click(check) on that checkbox all the below checkbox should be selected or vice-versa.

• javascript
• vue.js
• vuetify.js

Share Improve this question Follow asked Sep 2, 2019 at 6:06 shashi vermashashi verma 97344 gold badges1515 silver badges2727 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

Here is an example of using puted for this case:

new Vue({
  el: '#app',
  data: {
    selected: [],
    count: 5
  },
  puted: {
    selectedAll: {
      set(val) {
        this.selected = []
        if (val) {
          for(let i = 1; i <= this.count; i++) {
            this.selected.push(i)
          }
        }
      },
      get() {
        return this.selected.length === this.count
      }
    }
  }
})

<script src="https://cdnjs.cloudflare./ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
 <label>
   <input type="checkbox" v-model="selectedAll" />
   Select all
 </label>
  <ul>
    <li v-for="n in count">
      <label>
        <input type="checkbox" v-model="selected" :value="n" />
        C {{ n }}
      </label> 
    </li>
  </ul>
</div>

But I haven't tested it by vuetify.

You can loop through the selected array to make all the indexes to true But in the very first time, you have to get the length of checkboxes from some other source instead of selected array.(I'm using refs to count checkboxes here)

the code would be something like below

<v-checkbox 
  ref="n"
  v-model="selected[n]"
></v-checkbox>


select_All(e){
        if(e == true)
        {
          this.$refs.n.forEach((val, index) => this.selected[index] = true)
        } else {
            this.$refs.n.forEach((val, index) => this.selected[index] = false)
        }
    }

I use it like this for select/deselect multiple dynamically generated checkboxes:

    <v-checkbox v-model="selected" @click.native.stop="selectAll()" />
    <v-checkbox v-model="checkbox[0]" class="checkbox" @click.native.stop />
    <v-checkbox v-model="checkbox[1]" class="checkbox" @click.native.stop />
    <v-checkbox v-model="checkbox[2]" class="checkbox" @click.native.stop />
    <v-checkbox v-model="checkbox[3]" class="checkbox" @click.native.stop />
    <v-checkbox v-model="checkbox[4]" class="checkbox" @click.native.stop />

Checkboxes above can be dynamically generated. I use (not this case) v-for cycle code block with API id's as index.

new Vue({
  el: '#app',
  data: {
    checkbox: {},
    selected: false
  },
  mounted () {
    /* this is just example, in this case you could type number properties 
    directly in data.checkbox like checkbox[0] = false etc., but in a real case 
    you may want to use string ID or any API based index with it's corresponding 
    v-for html markdown */
    for (let i = 0; i < 5; i++) {
      // maintaining reactivity
      this.$set(this.checkbox, i, false)
    }
  },
  methods: {
    selectAll () {
      for (const i in this.checkbox) {
        this.checkbox[i] = this.selected
      }
    }
  }

})

You can probably replace mounted block for this if you want:

watch: {
  checkbox: {
    immediate: true,
    handler () {
      for (let i = 0; i < 5; i++) {
        // maintaining reactivity
        this.$set(this.checkbox, i, false)
      }
    }
  }
}

本文标签： javascriptHow to check all checkbox on checking one checkbox in vuetifyStack Overflow